前言
随着页面越来越多，项目体积越来越大。构建速度巨慢，项目打包时间完全可以嗑瓜子，打豆豆了。性能上加载速度也是很慢。。但是优化并不是一下可以优化到极致，而是从多个点，慢慢积累起来的！
构建优化
第三方库的拆分DllPlugin
DllPlugin和DllReferencePlugin提供装置中，可以大幅度地提高编译时间性能的方式来分割包。
node_modules目录非常大，但又是不可缺少的，所以我们先从node_modules下手！把node_modules下面的第三方库提取出来！
1、项目根目录首先要创建一个webpack.dll.config.js的文件
2、在package.json下面的script添加
"dll": "webpack -p --progress --config ./webpack.dll.config.js",
3、执行 npm run dll 会生成vendor.dll.js和vendor.manifest.json两个文件，不多赘述
4、在vue.config.js
5、执行npm run build 进行打包
时间上也比之前快了10S左右;
文件大小上如下图；
打包前： —————— 打包后：
使用uglifyjs-webpack-plugin插件缩小javaScript
在压缩过程中对碎片化的冗余代码（如 console 语句、注释等）进行自动化删除;parallel使用多进程并行运行可提高构建速度，因此强烈建议使用，对文件体积，构建速度都有显著效果！
安装npm install uglifyjs-webpack-plugin --save-dev
在vue.config.js引入const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
new UglifyJsPlugin({
uglifyOptions: {
cache: true, // 启用缓存
compress: {
drop_debugger: true,
drop_console: true, //生产环境自动删除console
},
output: {
// 不保留注释
comments: false, beautify: false
},
warnings: false,
},
sourceMap: false,
parallel: true, //使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
});
moment构建优化
在项目中经常会使用到moment做一些时间处理，但是monment里面包含了很多语言包都会打进项目里面，导致了项目体积变大，构建速度减慢。可以使用webpack的IgnorePlugins
进行忽略掉，在vue.config.js里面添加：
new webpack.IgnorePlugin(/\.\/locale/, /moment/)
如果需要某个语言包，引入就可以了
import moment from 'moment'
//手动引入所需要的语言包
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
然后就可以了，时间对比如下，减少4s多;
体积对比如下：体积也有明显变化！
缓存
HardSourceWebpackPlugin
对一些打包的文件进行缓存，这样可以提高构建速度！效果也非常显著！
首先通过npm i -D hard-source-webpack-plugin来安装插件；
var HardSourceWebpackPlugin =
require('hard-source-webpack-plugin');
module.exports = {
plugins: [
new HardSourceWebpackPlugin()
]
}
这个配置比较简单，也可以参照官网进行配置;
