使用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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
微信小程序本地存储实现每日签到、连续签到功能
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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
jquery中ajax学习笔记3
2011/10/16 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
javascript数组排序汇总
2015/07/07 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
使用Python对Csv文件操作实例代码
2017/05/12 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
人大代表选举标语
2014/10/07 职场文书
2014年网管工作总结
2014/12/11 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript