详解vue-cli之webpack3构建全面提速优化
前言
伴随着vue的全球化，已经各种vue的组件框架越来越完善，从早期的element-ui到vux，iview等越来越多高质量的项目，使用vue进行前端构建已然是一件工程化，模块化，敏捷化的事情
在这其中，相信很多人都会选择官方的vue-cli初始化工程模板，然后通过引入第三方组件框架和工具的方式进行开发构建，我个人也十分推崇这种做法。但是vue-cli初始化的项目模板毕竟是面向所有开发者的，在兼容性方面会有一定妥协。相信很多人都已经搜索过各类的webpack构建优化文章，但是很多不是版本太老就是不严谨
本文希望能在耗时优化与构建性能提升之间做一个平衡，即花最少的时间，对官方模板做最少的修改下，赚取最大的构建性能提升
思路
早期版本的vue-cli和webpack2时代，网上流传以下优化配置，但其实新版本的vue-cli和webpack3已经不需要
- 使用ParallelUglifyPlugin替换UglifyPlugin（新版本的UglifyPlugin已经支持且默认开启了多线程并行构建，所以此步骤没有必要）
- 启用webpack3的ScopeHoisting（vue-cli新版本已经配置webapck3，且已经默认开启此配置）
- 善用alias（新版本vue-cli已经进行此项工作）
- 配置CommonsChunkPlugin提取公用代码（新版本vue-cli已经进行此项工作）
对于新版本的vue-cli和webpack3，以下简单配置优化后可提升最少2倍的构建速度
- 按需引用
- 启用happypack多核构建项目
- 修改source-map配置
- 启用DllPlugin和DllReferencePlugin预编译库文件
实践
1、按需引用
1.1几乎所有的第三方组件框架都会提供组件的按需引用方式，以iview为例，通过借助插件babel-plugin-import可以实现按需加载组件，减少文件体积，只需要修改.babelrc文件
npminstallbabel-plugin-import--save-dev
//.babelrc
{
"plugins":[["import",{
"libraryName":"iview",
"libraryDirectory":"src/components"
}]]
}
1.2然后这样按需引入组件，就可以减小体积了
import{Button}from'iview'
Vue.component('Table',Table)
2、启用happypack多核构建项目
安装happypack后，修改/build/webpack.base.conf.js文件即可
npminstallhappypack--save-dev
///build/webpack.base.conf.js
constHappyPack=require('happypack')
constos=require('os')
consthappyThreadPool=HappyPack.ThreadPool({size:os.cpus().length})
//增加HappyPack插件
plugins:[
newHappyPack({
id:'happy-babel-js',
loaders:['babel-loader?cacheDirectory=true'],
threadPool:happyThreadPool,
})
]
//修改引入loader
{
test:/\.js$/,
//loader:'babel-loader',
loader:'happypack/loader?id=happy-babel-js',//增加新的HappyPack构建loader
include:[resolve('src'),resolve('test')]
}
3、修改source-map配置
3.1首先修改/config/index.js文件
///config/index.js dev环境：devtool:'eval'（最快速度） prod环境：productionSourceMap:false（关闭source-map）
3.2然后修改/src/main.js文件，关闭生产环境的调试信息
///src/main.js constisDebug_mode=process.env.NODE_ENV!=='production' Vue.config.debug=isDebug_mode Vue.config.devtools=isDebug_mode Vue.config.productionTip=isDebug_mode
4、启用DllPlugin和DllReferencePlugin预编译库文件
这是最复杂也是提升效果最明显的一步，原理是将第三方库文件单独编译打包一次，以后的构建都不需要再编译打包第三方库
4.1增加build/webpack.dll.config.js文件，并在其中配置需要单独DLL化的模块
constpath=require("path")
constwebpack=require("webpack")
module.exports={
//你想要打包的模块的数组
entry:{
vendor:['vue/dist/vue.esm.js','axios','vue-router','iview']
},
output:{
path:path.join(__dirname,'../static/js'),//打包后文件输出的位置
filename:'[name].dll.js',
library:'[name]_library'
},
plugins:[
newwebpack.DllPlugin({
path:path.join(__dirname,'.','[name]-manifest.json'),
name:'[name]_library',
context:__dirname
}),
//压缩打包的文件
newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
})
]
}
4.2在build/webpack.dev.conf.js和build/webpack.prod.conf.js增加如下插件
newwebpack.DllReferencePlugin({
context:__dirname,
manifest:require('./vendor-manifest.json')
})
4.3在/package.json增加命令
"dll":"webpack--config./build/webpack.dll.config.js"
4.4在/index.html增加DLL化JS引入（必须首先引入）
4.5执行构建
npmrundll（这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js） npmrundev或npmrunbuild
后记
以上四个大步骤完成后，我们就完成了对vue-cli模板工程构建优化提升，虽然看起来依然算不上简单，但是这已经是最最最简单的优化了，还有更多奇技淫巧没有展开，因为我觉得过多的优化配置意义不大，反而会给项目工程带来太多冗余和复杂化
以上的配置实际测试的构建效果是从原先的13秒减少到了6秒左右，热部署更是毫秒级的
最重要的是，最简单化的配置，在未来vue-cli和webpack升级新版本后，也可以很容易的重新配置进去使用，熟练配置一次后，重新再还原配置只需要5分钟左右想想花5分钟修改一下配置，就能换来每次构建2倍以上速度的提升，是不是会有点小激动呢：）
这里再多说些后话吧，其实webpack2至webpack3的升级，个人觉得蛮失望的，因为它还是没有从根本上解决其配置过于复杂的问题，作为目标是占领全世界所有web项目构建的产品，它应该更多地从易用性/人性化的角度去考虑
每一次看着webpack的工程里面的各种.babelrc，.postcssrc.js...还有各种的.conf文件，甚至还有各种的main，index，app文件，就忍不住想吐槽，究竟为什么前端的构建会发展成这样，一个好好的项目工程里，十几种配置文件，真的有必要吗？我原本以为webpack3会将这一切变得简单，然而它并没有，不过既然暂时没有办法去改变，那我们能做的就是，尽可能理解其中原理，尽自己最大的可能去简化/优化
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。