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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
JavaScript实现点击图片换背景
Nov 20 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
php 可变函数使用小结
2018/06/12 PHP
使用Apache的rewrite
2021/03/09 Servers
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
layui中table表头样式修改方法
2018/08/15 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
vue 开发企业微信整合案例分析
2019/12/02 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
python中的错误如何查看
2020/07/08 Python
python简单实现9宫格图片实例
2020/09/03 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
毕业实习评语
2014/02/10 职场文书
会计专业自我鉴定
2014/02/10 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
安全生产月活动总结
2014/05/04 职场文书
高中教师考核方案
2014/05/18 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
担保书范文
2015/01/20 职场文书
义卖募捐活动总结
2015/05/09 职场文书
公司联欢会主持词
2015/07/04 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js