对前端项目打包产物分析入库的好处

背景

如果我们前端的项目没有把打包产物监控起来，会存在以下几个问题：

1. 哪次commit，把项目体积拉大了，性能又变差了？

   1. （有些同学可能在开发过程中没关注性能问题，导致后面要优化时，追溯成本变高）

2. 哪些文件的缓存会失效？是否符合预期？

3. 是否有重复引入的三方依赖？

4. 某些资源到底是同步还是异步加载的，是否符合预期？

记录下每次打包产物，可以对产物做一些分析，也可以对各次打包内容之间作对比，会得到很多好处

思路

1. 增加一个webpack插件，插件里做的事情是，把打包的结果，通过接口的方式，上传到服务端 保存下来
2. 开发一个平台，让这些产物的数据可视化

具体实现细节，最近比较忙，没时间细讲，有兴趣的朋友，可以通过这个思路，自己去尝试

最终能实现哪些好处

我这边就列举几个，更多的应用，可以自己去深入探索

1. 记录每次打包的结果，可以记录到以下信息

   1. 总的打包后的资源Size
   2. 分析出同步资源和异步资源
   3. 首屏的js，css总size
   4. 所有js、css、图片、字体等大小排序（分tab）

2. 可选择查看任何两次的SCM打包之间的差异

3. 可以分析出重复引用的依赖

   1. 比如 axios 分别被 a，b，c三个不同的依赖都引用了，可以分析显示出来

4. 资源的浏览器缓存是否失效（对比上次打包的文件名可以看出来）

5. 还可以把webpack-bundle-analyzer的功能集成进去

---

码字不易，点赞鼓励