VUE项目打包慢优化

2022.10.28更新

到今天，打包的时间已经延长到55分钟了，忽然来了灵感，决定换种思路排查问题。功夫不负有心人，终于彻底解决这个问题，可是锅还是得自己背。罪魁祸首就是在vue.config.js中添加了css.loaderOptions.sass的配置。

其中的theme.scss文件中又嵌套引用了common.scss和和var.scss文件，这些文件中有大量的样式，甚至有@for指令遍历到100、500的。

这样就导致了，每一个vue文件都会引入这些css。模块文件越多，打包越慢，包体积越大。

其实这些问题都有迹可循，只是当时没有把握住，或者只解决了眼前的问题，没有解决根本问题。

比如：

1、这是一个h5项目，部署在nginx中，初次连接的时候非常慢，很久才会有响应。线上环境慢的已经无法忍受了，经过排查发现是nginx的gzip没有生效，修改配置后gizp生效，速度快了许多。问题的本质其实是打包的项目越来越大。

2、经过多次优化，打包速度还是比较慢，而每次新增了些功能模块，打包时间就再度增加。所以打包慢的原因肯定和功能模块有关系，只是无法确定具体原因。

至于是如何发现的问题

由于打包时间再度增加，而以后还要继续加功能模块，如果不解决还会更久问题是无法回避的。而目前项目体积越来越大，功能模块越来越多，而能做的优化都做了，分析插件也都安装了也没看出个所以然。同样是h5项目，体积也很大，也没有这个项目需要这么久的打包时间，我怀疑是脚手架有问题，现在这个项目是网上找的一个第三方脚手架，其中的路由和组件都是读取文件目录根据一定的规则自动识别，也不能排除问题。所以可以用官方的脚手架创建一个新的项目，一步一步迁移内容来逐步排除问题。

直到我将公共组件部分迁移过来后，打包耗时从十秒左右提升到了14分钟。无意之间我翻看stats.json文件，发现了如下内容。也许以前我也翻看了该文件，只是没有设置编辑器为自动换行，就没有发现这个现象。全局搜索关键字下，才发现了theme.scss文件的情况，进一步联想到了以前查看打包的css文件体积很大。猜测是vue.config.js中的某项配置将样式打包进来了。

去除了嵌套的scss文件，替换成了全局的主题色scss文件。打包耗时仅26秒，与之前的55分钟形成强烈对比。包体积仅15MB，查看之前的包带gzip的一共有83MB。

至此，彻底解决问题，心中的大石头终于落下，现在的26秒打包耗时，说明了之前的优化都是有效的。这告诉了我们，解决问题的方向还是很重要的。

2022.07.26更新

增加speed-measure-webpack-plugin插件

thread-loader多线程打包

部分文件拆分

其中最有用的措施就是拆分文件，其他优化对速度几乎没有影响，最终打包在20分钟左右

正文

vue项目越写越大，打包也越来越慢了，最近的已经延长到了30分钟。百度搜索相关资料，大多数优化方案都收效胜微。直到看到以下方案，经过苦苦搜寻，终于找到与项目匹配的资料。vue-cli4的集成方式，在vue.config.js中配置。参考《vue-cli4 打包优化之 DllPlugin 和 DLLReferencePlugin》