项目打包优化我做了这几点

背景

公司项目使用阿里框架UMI搭建的项目，开发2年，业务需求不断累加，项目越来越臃肿，服务器打包发版需要15分钟。优化之后只需要4分40秒，我刚入职就让我做一些性能优化，对于业务不太熟悉的我，就考虑从cdn、拆包、静态资源方面的优化，代码层面的就没有深入的优化，比如路由懒加载，图片懒加载，本地存储，缓存策略，将一些公共的抽离第三方用cdn加载等。

静态资源优化

我在本地打包都要7分钟，也就是说打包需要7分钟，其他的复制解压需要费8分钟，体积太大也是压缩、解压的一个大问题，整个项目打包出来36M，图片12M，字体文件11M，这些静态文件几乎不怎么改的，没必要每次都打包压缩，每次都复制一遍也很消耗性能，就算复制一个10M的文件也需要几十秒，很浪费时间，按道理说这些文件不应该存在的，小公司没注意这些，开发项目的时候没有规划好，现在项目基本定型了才有空优化。

图片上传到阿里oss，这里没什么可以说的，就算不放到阿里的oss，用原来的方式访问页面的时候还是会请求，跟直接放到阿里服务器没区别，要进一步优化，就需要做一些懒加载，做一些缓存，不用每次都请求这些图片文件，几百年改一次的东西都可以写死的，没必要每次都传，浪费服务器的资源，就连git的资源都被占用了

字体文件压缩，不是所有的字都用的上，中文3千字，很多偏僻的字压根用不上，页面上用的多少就保留多少，通过gulp去压缩，将9M压缩到240K，需要的看我另外一篇文章，再放到服务器上，减少打包的体积。

cdn优化

有一些用了第三方库，比如网易云信的SDK 688K，这些第三方库不会经常改，除非大版本的改，基本不改动的，可以用cdn的方式，不用每次都打包，688K的代码如果每行都要经过babel-loader，也是很费时间的，一些第三方插件都可以直接放服务器然后通过cdn的方式跳过打包，这里遇到一个问题，网易云信的SDK是个CommonJS模块，没有暴露到全局window，需要自己暴露，我用webpack单独打包了一遍，将它暴露到window。

拆包减轻代码体积

静态资源都清理完之后剩下12M，还有很多重复冗余的代码，重复引用的代码，可以通过splitChunk设置颗粒度，进行拆包，可以看我另一篇文章，将体积进一步的缩小，从12M减少到9.9M。

总结

项目体积从36M到9.9M， 打包时间从15分钟到4分40秒，还是很有成绩，但是UMI里面有些默认配置不太好修改，对于性能的提升，loader，plugin比较难覆盖，多线程开启无效，缓存在服务器上默认被删除（Jekins部署构建前就删缓存，可能是怕有缓存）只能优化到这里。项目越来越大，不管是启动还是打包都很慢，可以考虑微前端，将一些项目拆成多个单独打包，单独的模块，改动比较少，每次不用全部都重新打包，这样开发效率会更快，但是数据传输，登录校验，账号切换估计会比较麻烦。这个项目后面可能会重构，暂时不考虑拆解了。

写在最后面是一个项目编译的一个优化，项目打包会将小于10K的图片转成base64，但是编译的时候不需要每次都转，在开发的时候我甚至觉得可以直接跳过静态文件不需要处理，只处理代码，会更快，而且编译的时候甚至不需要要压缩，这样可以节省很多的时间，虽然会占内存（webpack都是将编译后的文件保存在内存中），我将图片设置成超过1K的就不做操作，每次编译的时候会快上很多，之前每次编译都要20多秒，现在每次编译都是9秒左右，虽然不是很快但是还是有一些优化的成绩。