vue cli 平稳升级webapck4
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种模块类型。
json: 可通过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件)
webassembly: WebAssembly 模块,(目前是 .wasm 文件的默认类型)
javascript/auto: (webpack 3中的默认类型)支持所有的JS模块系统:CommonJS、AMD。
javascript/esm: EcmaScript模块(默认 .mjs 文件)。
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则实现了相同的功能,并且配置更加灵活,具体解释可参考这篇文章,解释得很详细。RIP CommonsChunkPlugin
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%左右,同时打包后的代码体积也有了很大的优化,带来的效果很显著的。
如果觉得我没有说明白,这里有一份配置,请拿走
原文地址:https://segmentfault.com/a/1190000014169887
vue cli 平稳升级webapck4的更多相关文章
- Vue CLI 介绍安装
https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- node,npm,vue的全局升级
pc环境:windows 10, OS:win32, Arch:x64 1.升级node.js到最新 ⑴.别人成功的方法: . 第一步 npm -g install n //此处可以加上 --forc ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- Vue Cli安装以及使用
因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
- 用@vue/cli发布npm包
1.环境准备 安装node,npm,@vue/cli 2.初始化项目 用@vue/cli创建新项目 vue create mtest-ui 删除public,main.js,App.vue等无关文件, ...
- 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
- vue cli 4.0.5 的使用
vue cli 4.0.5 的使用 现在的 vue 脚手架已经升级到4.0的版本了,前两日vue 刚发布了3.0版本,我看了一下cli 4 和cli 3 没什么区别,既然这样,就只总结一下vue cl ...
- VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。
场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...
随机推荐
- gradle打包android (实现外部导入签名文件、多渠道打包、导入ant脚本)
近期一直在做android自己主动打包,之前已经完毕了用纯命令行的形式打包.原生态ant脚本打包.和基于android的SDK的打包.而且实现了多渠道打包,后来同事推荐了gradle,网上的资料说gr ...
- expect安装测试-自动登陆脚本
安装: yum list | grep expect yum install expect 参考:http://www.cnblogs.com/iloveyoucc/archive/2012/05/1 ...
- luogu1415 拆分数列
题目大意 给出一列数字,需要你添加任意多个逗号将其拆成若干个严格递增的数.如果有多组解,则输出使得最后一个数最小的同时,字典序最大的解(即先要满足最后一个数最小:如果有多组解,则使得第一个数尽量大:如 ...
- Android系统Recovery工作原理之使用update.zip升级过程分析(七)---Recovery服务的核心install_package函数【转】
本文转载自:http://blog.csdn.net/mu0206mu/article/details/7465514 一. Recovery服务的核心install_package(升级 ...
- SQL Server2012 T-SQL基础教程--读书笔记(5-7章)
SQL Server2012 T-SQL基础教程--读书笔记(5-7章) SqlServer T-SQL 示例数据库:点我 Chapter 05 表表达式 5.1 派生表 5.1.1 分配列别名 5. ...
- 原生JS---3
原生js学习笔记3——数组 定义数组 两种方式定义一个数组: 1. var array1 = new array(1, 2, 3, 4); 2. var array2 = [1, 2, 3, 4]; ...
- java常见面试题03-String,StringBuffer,StringBuilder的区别
面试题 A:String,StringBuffer,StringBuilder的区别 1:String 内容不可变,StringBuffer.StringBudiler可变 2:StringBu ...
- BZOJ 4563 错排+高精度
思路: 把障碍移到对角线 就发现 这是个错位排列问题 用错排公式即可解 s[i]=(s[i-1]+s[i-2])*i //By SiriusRen #include <cstdio> #i ...
- fontSpider字蛛,好用的字体压缩工具教程
一直觉得很多字体特别好看,但是那些好看的字体只能做在图片上不能用CSS样式去实现,作为一个会设计的前端,真心觉得很烦恼,有时候那些文字需要更换,修改起来非常麻烦,要到处去找源文件,找不到源文件还要尽力 ...
- # --with-http_sub_module模块
作用: http内容替换 语法 第一种语法: sub_filter string:要替换的内容 替换后的内容 这个模块只能替换第一个匹配的字符串,如果需要匹配全部替换,则用到下面的第三种语法配置 第二 ...