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实现表格数据的动态添加与统计的代码
Jan 31 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
如何用JS实现简单的数据监听
May 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
简单的php 验证图片生成函数
2009/05/21 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
python MD5加密的示例
2020/10/19 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
乡镇消防工作实施方案
2014/03/27 职场文书
会计专业求职信
2014/08/10 职场文书
党员公开承诺书2015
2015/01/21 职场文书
药店收银员岗位职责
2015/04/07 职场文书
2016公司年会主持词
2015/07/01 职场文书
公司开业致辞
2015/07/29 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
创业计划书之花店
2019/09/20 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js