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中面向对象技术的模拟
Sep 25 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 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 文件扩展名 获取函数
2009/06/03 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php生成动态验证码gif图片
2015/10/19 PHP
php生成word并下载代码实例
2019/03/15 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
python实现逆波兰计算表达式实例详解
2015/05/06 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
python实现识别相似图片小结
2016/02/22 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
三个儿子教学反思
2014/02/03 职场文书
税务会计岗位职责
2014/02/18 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
社区禁毒工作方案
2014/06/02 职场文书
读群众路线的心得体会
2014/09/03 职场文书
离婚协议书样本
2015/01/26 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL
Go语言怎么使用变长参数函数
2022/07/15 Golang