随着页面越来越多，项目体积越来越大。构建速度巨慢，项目打包时间完全可以嗑瓜子，打豆豆了。性能上加载速度也是很慢。。但是优化并不是一下可以优化到极致，而是从多个点，慢慢积累起来的！

和DllReferencePlugin提供装置中，可以大幅度地提高编译时间性能的方式来分割包。

node_modules目录非常大，但又是不可缺少的，所以我们先从node_modules下手！把node_modules下面的第三方库提取出来！

1、项目根目录首先要创建一个webpack.dll.config.js的文件

5、执行 进行打包

时间上也比之前快了10S左右;

文件大小上如下图；

打包前：? ? ? ? ? ? ? ? ? ? ? ? ? ——————? ?打包后：

在压缩过程中对碎片化的冗余代码（如 console 语句、注释等）进行自动化删除;parallel使用多进程并行运行可提高构建速度，因此强烈建议使用，对文件体积，构建速度都有显著效果！

安装npm install uglifyjs-webpack-plugin --save-dev

在vue.config.js引入const UglifyJsPlugin=require('uglifyjs-webpack-plugin');

在项目中经常会使用到moment做一些时间处理，但是monment里面包含了很多语言包都会打进项目里面，导致了项目体积变大，构建速度减慢。可以使用webpack的

进行忽略掉，在vue.config.js里面添加：

如果需要某个语言包，引入就可以了

然后就可以了，时间对比如下，减少4s多;

体积对比如下：体积也有明显变化！

对一些打包的文件进行缓存，这样可以提高构建速度！效果也非常显著！

首先通过来安装插件；

这个配置比较简单，也可以参照官网进行配置;