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深入理解js闭包
Jul 03 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 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
来自PHP.NET的入门教程
2006/10/09 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
验证码按回车不变解决方法
2013/03/29 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python的数学算法函数及公式用法
2020/11/18 Python
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
应届大学生求职的自我评价
2013/11/17 职场文书
教育科研先进个人材料
2014/01/26 职场文书
《将心比心》教学反思
2014/04/08 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
优秀护士先进事迹
2014/05/08 职场文书
毕业生工作求职信
2014/06/30 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
教师求职自荐信
2015/03/26 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
创业计划书之餐饮
2019/09/02 职场文书