vue cli升级webapck4总结


Posted in Javascript onApril 04, 2018

webpack4 released 已经有一段时间了,插件系统趋于平稳,适逢对webpack3的打包速度很不满意,因此决定将当前在做的项目进行升级,正好也实践一下webpack4。

新特性

0配置

应该是parcel出来以后,webpack团队意识到其配置确实有点复杂,不太容易上手。so, webapck4 开始支持0配置启动。不过,万变不离其宗,webpack4的0配置也只是支持了默认entry 和 output而已,即默认entry为./src,默认output为/dist。

模式选择mode

mode有两个可选项,production & development。作为必选项,mode是不可缺省的。在production模式下,会默认做一些必要的优化,如代码压缩和作用域提升,还会默认指定process.env.NODE_ENV 为 production。在development模式下,优化了增量构建,支持注释和提示,并且支持 eval 下的 source maps,同时默认指定process.env.NODE_ENV 为 development。

sideEffects

通过该配置可以大幅度减小打包体积。当模块的 package.json 配置sideEffects:false表明该模块没有副作用,也就意味着 webpack 可以安全地清除被用于重复导出(re-exports)的代码。

模块类型

webpack4提供了5种模块类型。

  1. json: 可通过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件)
  2. webassembly: WebAssembly 模块,(目前是 .wasm 文件的默认类型)
  3. javascript/auto: (webpack 3中的默认类型)支持所有的JS模块系统:CommonJS、AMD。
  4. javascript/esm: EcmaScript模块(默认 .mjs 文件)。
  5. javascript/dynamic: 仅支持 CommonJS & AMD。

JSON

webpack 4 不仅支持本地处理 JSON,还支持对 JSON 的 Tree Shaking。当使用 ESM 语法 import json 时,webpack 会消除掉JSON Module 中未使用的导出。此外,如果要用 loader 转换 json 为 js,需要设置 type 为 javascript/auto。

optimization

Webpack 4 删除了 CommonsChunkPlugin,并默认启用了它的许多功能。因此webpack4可以实现很好的默认优化。但是,对于那些需要自定义的缓存策略,增加了 optimization.splitChunks 和 optimization.runtimeChunk。具体解释可参考这篇文章,解释得很详细。RIP CommonsChunkPlugin点击预览

手把手升级

我是把原来vue cli的项目做了一下升级,总体来说,升级还算是比较顺利步骤,这里我们分成两步走,首先升级相关依赖的插件,然后优化webapck配置文件。

升级插件

首先要把下面列表的插件升级到对应版本或者最新版本

webpack@4.4.1
css-loader@0.28.10,
extract-text-webpack-plugin@4.0.0-beta.0,
file-loader@1.1.11,
html-webpack-plugin@3.1.0,
optimize-css-assets-webpack-plugin@4.0.0,
url-loader@1.0.1,
vue-loader@14.2.2,
vue-style-loader@4.1.0,
vue-template-compiler@2.5.16,
webpack-bundle-analyzer@2.11.1,
webpack-dev-middleware@3.1.0,
webpack-dev-server@3.1.1,
webpack-hot-middleware@2.21.2

如果遇到其他包报错,应该是升级到最新的就可以解决了。

更新配置文件

webpack.dev.conf.js

dev环境变化不大,毕竟webpack4很大一部分的优化都是针对生产环境的,该文件我们只需要删除一些不再需要的插件既可以。例如:webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin,其功能webpack4已经默认配置。同时,要设置

mode: 'development'
webpack.production.conf.js

webvpack4中改动最大,影响也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。以前的CommonsChunkPlugin主要用来抽取代码中的共用部分,webpack runtime之类的代码,结合chunkhash,实现最好的缓存策略。而optimization.splitChunks则实现了相同的功能,并且配置更加灵活,具体解释可参考这篇文章,解释得很详细。

mode: 'production',
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
name: 'vendors',
},
'async-vendors': {
test: /[\\/]node_modules[\\/]/,
minChunks: 2,
chunks: 'async',
name: 'async-vendors'
}
}
},
runtimeChunk: { name: 'runtime' }
}

总结

总体来说本次升级还算顺利,不到一天搞定,目前感觉,打包速度大约优化了70%左右,同时打包后的代码体积也有了很大的优化,带来的效果很显著的。

Javascript 相关文章推荐
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
JavaScript实现短暂提示框功能
Apr 04 #Javascript
Vue filter介绍及详细使用
Apr 04 #Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 #Javascript
详解如何用babel转换es6的class语法
Apr 03 #Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 #Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 #Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 #Javascript
You might like
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
Python的collections模块真的很好用
2021/03/01 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
2014年公务员退休工资改革方案
2014/10/01 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
上诉状格式
2015/05/23 职场文书
2015中学学校工作总结
2015/07/20 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
Python3 类型标注支持操作
2021/06/02 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技