使用Webpack提升Vue.js应用程序的4种方法(翻译)


Posted in Javascript onOctober 09, 2019

本文翻译自,翻译技巧不太好,不喜勿碰 :
4 Ways To Boost Your Vue.js App With Webpack

众所周知,webpack 是 开发 vue.js 单页面应用程序的必备工具,通过管理复杂的构建步骤,它可以使您的开发工作流程更加简单,并且可以优化应用程序的大小和性能。

在本文中,我将解释Webpack增强Vue应用程序的四种方法,包括:

  • Single file components 单文件组件
  • Optimising the Vue build
  • Browser cache management
  • Code splitting

关于 vue-cli

如果您使用模板从vue-cli构建应用程序,那么将提供预制的Webpack配置。它们已经过优化,没有任何改进建议!
但是,由于它们开箱即用的效果非常好,您可能对它们的实际功能并不太了解,对吗?
考虑一下本文,对vue-cli模板中使用的Webpack配置进行概述,因为它们包含了我在这里讨论的相同优化。

1. Single file components

Vue的特有功能之一是将HTML用于组件模板。但是,这些带有一个固有的问题:要么您的HTML标记需要使用笨拙的JavaScript字符串,要么您的模板和组件定义必须位于单独的文件中,从而使其难以使用。

Vue有一个优雅的解决方案,称为“单个文件组件(SFC)”,该文件将模板,组件定义和CSS都包含在一个简单的.vue文件中:

<template>
 <div id="my-component">...</div>
</template>
<script>
 export default {...}
</script>
<style>
 #my-component {...}
</style>

vue-loader Webpack插件使SFC成为可能。该加载器拆分SFC语言块并将每个管道通过管道传输到适当的加载器,例如脚本块转到babel-loader,而模板块转到Vue自己的vue-template-loader,后者将模板转换为JavaScript渲染函数。
vue-loader的最终输出是一个JavaScript模块,准备将其包含在Webpack捆绑包中。

vue-loader的典型配置如下:

module: {
 rules: [
  {
   test: /\.vue$/,
   loader: 'vue-loader',
   options: {
    loaders: {
     // Override the default loaders
    }
   }
  },
 ]
}

2. Optimising the Vue build

如果仅在Vue应用程序*中使用渲染功能,而没有HTML模板,则不需要Vue的模板编译器。您可以通过从Webpack构建中省略编译器来减小捆绑包的大小。

请记住,单个文件组件模板已在开发中预编译以呈现功能!

Vue.js库只有运行时版本,其中包含Vue.js的所有功能,但模板编译器称为vue.runtime.js。它比完整版本小20KB,因此如果可以的话值得使用。

默认情况下,仅使用运行时构建,因此,每次使用 import vue from 'vue' 时,都将使用它。在您的项目中,这就是您所得到的。但是,您可以使用alias 别名配置选项更改为其他版本:

resolve: {
 alias: {
  'vue$': 'vue/dist/vue.esm.js' // Use the full build
 }
},

Stripping out warnings and error messages in production

减小Vue.js构建大小的另一种方法是删除生产中的任何错误消息和警告。这些使用不必要的代码使输出包大小膨胀,并且还导致您最好避免运行时开销

如果您检查Vue源代码,则会看到警告块取决于环境变量process.env.NODE_ENV的值,例如:

if (process.env.NODE_ENV !== 'production') {
 warn(("Error in " + info + ": \"" + (err.toString()) + "\""), vm);
}

如果将process.env.NODE_ENV设置为生产,那么在构建过程中,minifier可以自动将此类警告块从代码中剥离。

您可以使用DefinePlugin来设置process.env.NODE_ENV的值,并使用UglifyJsPlugin来减少代码并去除未使用的块:

if (process.env.NODE_ENV === 'production') {
 module.exports.plugins = (module.exports.plugins || []).concat([
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"'
   }
  }),
  new webpack.optimize.UglifyJsPlugin()
 ])
}

3. Browser cache management

用户的浏览器将缓存您网站的文件,以便仅在该浏览器尚无本地副本或本地副本已过期时才下载。

如果您所有的代码都在一个文件中,那么进行微小的更改就意味着需要重新下载整个文件。

理想情况下,您希望用户下载得尽可能少,因此将应用程序很少更改的代码与频繁更改的代码分开是明智的。

Vendor file

Common Chunks插件可以将您的 vendor 代码(例如,不太可能经常更改的Vue.js库之类的依赖项)与您的应用程序代码(每次部署可能更改的代码)分离。

您可以配置插件以检查依赖项是否来自node_modules文件夹,如果是,则将其输出到单独的文件vendor.js中:

new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 minChunks: function (module) {
  return module.context && module.context.indexOf('node_modules') !== -1;
 }
})

如果这样做,您现在在构建输出中将有两个单独的文件,这些文件将由浏览器独立缓存:

<script src="vendor.js" charset="utf-8"></script>
<script src="app.js" charset="utf-8"></script>

Fingerprinting

当构建文件更改时,我们如何破坏浏览器的缓存?

默认情况下,仅当缓存的文件到期时,或者当用户手动清除缓存时,浏览器才会再次从服务器请求文件。

如果服务器指示文件已更改,则将重新下载该文件(否则服务器返回HTTP 304 Not Modified)。

为了节省不必要的服务器请求,我们可以在每次文件内容更改时更改其名称,以强制浏览器重新下载该文件。一个简单的系统可以通过在文件名后附加一个哈希来为文件名添加“指纹”:

使用Webpack提升Vue.js应用程序的4种方法(翻译)

Common Chunks插件会发出“ chunkhash”,如果文件内容已更改,则将对其进行更新。 Webpack可以在输出文件名时将此哈希附加到文件名中:

output: {
 filename: '[name].[chunkhash].js'
},

执行此操作时,您将看到输出的文件将具有类似app.3b80b7c17398c31e4705.js的名称。

Auto inject build files

当然,如果添加哈希,则必须更新索引文件中对该文件的引用,否则浏览器将不知道该哈希:

<script src="app.3b80b7c17398c31e4705.js"></script>

手动完成这项工作非常繁琐,因此请使用HTML Webpack插件为您完成。该插件可以在捆绑过程中自动将对构建文件的引用注入到HTML文件中。

首先删除对构建文件的引用:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>test-6</title>
 </head>
 <body>
  <div id="app"></div>
  <!-- built files should go here, but will be auto injected -->
 </body>
</html>

并将HTML Webpack插件添加到您的Webpack配置中:

new HtmlWebpackPlugin({
 filename: 'index.html'
 template: 'index.html',
 inject: true,
 chunksSortMode: 'dependency'
}),

现在,带有哈希的构建文件将自动添加到索引文件中。另外,您的index.html文件现在将包含在捆绑输出中,因此您可能需要告诉Web服务器其位置已更改

4. Code splitting

默认情况下,Webpack会将所有应用程序代码输出到一个大捆绑包中。但是,如果您的应用有多个页面,则拆分代码会更有效,因此每个单独的页面代码都位于单独的文件中,并且仅在需要时才加载
Webpack具有一项称为“代码拆分”的功能。在Vue.js中实现此功能还需要异步组件,并且通过Vue Router变得更加容易。

Async components

异步组件没有将定义对象作为第二个参数,而是具有一个Promise函数来解析该定义对象,例如:

Vue.component('async-component', function (resolve, reject) {
 setTimeout(() => {
  resolve({
   // Component definition including props, methods etc.
  });
 }, 1000)
})

Vue仅在组件实际需要渲染时才调用该函数。它还会缓存结果以供将来重新渲染。
如果我们设计应用程序,使每个“页面”都是一个组件,并且将定义存储在服务器上,那么我们就完成了代码拆分的一半。

require

要从服务器加载异步组件的代码,请使用Webpack require语法
这将指示Webpack在构建时将async-component捆绑在一个单独的bundle中,更好的是,Webpack将使用AJAX处理此bundle的加载,因此您的代码可以像这样简单:

Vue.component('async-component', function (resolve) {
 require(['./AsyncComponent.vue'], resolve)
});

Lazy loading

在Vue.js应用程序中,vue-router通常是您用于将SPA组织到多个页面中的模块。延迟加载是使用Vue和Webpack实现代码拆分的一种形式化方法。

const HomePage = resolve => require(['./HomePage.vue'], resolve);const rounter = new VueRouter({ routes: [  {   path: '/',   name: 'HomePage',   component: HomePage  } ]})

翻译到此为止了,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js动态加载以及确定加载完成的代码
Jul 31 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
Ant Design的Table组件去除
Oct 24 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 #Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 #Javascript
js基础之事件捕获与冒泡原理
Oct 09 #Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 #Javascript
vue封装swiper代码实例解析
Oct 08 #Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 #jQuery
简单实现节流函数和防抖函数过程解析
Oct 08 #Javascript
You might like
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
ADODB类使用
2006/11/25 PHP
PHP实时显示输出
2008/10/02 PHP
跟我学Laravel之路由
2014/10/15 PHP
php利用事务处理转账问题
2015/04/22 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
js实现随机抽奖
2020/03/19 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
Python执行时间的几种计算方法
2020/07/31 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
出国英文推荐信
2014/05/10 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
数学教师个人总结
2015/02/06 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
React实现动效弹窗组件
2021/06/21 Javascript
如何通过cmd 连接阿里云服务器
2022/04/18 Servers