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 相关文章推荐
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
HTML上传控件取消选择
Mar 06 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
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
php设计模式 Facade(外观模式)
2011/06/26 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python实现简单flappy bird
2018/12/24 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
pandas中的series数据类型详解
2019/07/06 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
详解如何修改python中字典的键和值
2020/09/29 Python
行政部主管岗位职责
2013/12/28 职场文书
计生工作先进事迹
2014/08/15 职场文书
民主评议党员工作总结
2014/10/20 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
成事在人观后感
2015/06/16 职场文书
朋友离别感言
2015/08/04 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
服务器间如何实现文件共享
2022/05/20 Servers
Mysql如何查看是否使用到索引
2022/12/24 MySQL