记一次包大小优化过程

起源主要来自我们通过微前端加载一个子应用时，结合devTool的network模块发现子应用的包有点太大了，chunk-vendor包有接近700多KB，在网速不好情况下可能需要大几s才能拉下来，所以尝试去优化该子应用的包大小

包大小的组成

优化之前首先要分析该应用的包构成，关注是哪些模块占据了较大空间，才能有针对性的着手优化。

这里无论是react还是vue项目，都可以借助webpack-bundle-analyze工具来进行分析

我这里是vue项目，直接基于vue-cli- service配置一下就可使用：

"analyzer": "vue-cli-service build --report"

接着打包的dist目录下会多出一个report.html文件，通过浏览器打开就可以看到包体积组成了：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TevaSha8-1655434390035)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ddb61d16150a458ab8348656aca76e9a~tplv-k3u1fbpfcp-zoom-1.image)]

上图中左侧是所有dist目录下的js-chunk打包文件以及不同格式下的size

右侧是按照chunks的size呈现的可视化包构成

通过上图分析我们可以了解到有大概5个chunk包均大于100KB，你可以单独勾选具体文件通过右侧观察其构成。而其他小chunk（几KB-10几KB）是内部支持dynamic import的页面组件，分成多个chunk以方便路由动态加载。

前5个包分别是

• xlsx，js-xlsx及其他部分node_modules库
• ant-design-vue，moment，core-js及其他部分库
• echarts库
• 城市省市区编码JSON数据
• hls播放器库

接下来的工作就是分析这些包有没有优化空间了

优化方案

xlsx与js-xlsx

这两个库部分功能重叠了，交由相关技术人员去分析同时引入的原因，能否移除一个库改为共用另一个excel库来实现？

ant-design-vue

这个库是antd组件库的vue版本，这种组件库一般可以尝试通过按需加载的方式来优化，分析了下源码，之前是全量引入的，后面根据antd官网的方式通过按需加载进行了优化

经过测试实现按需加载后整个antd-vue-design包缩减约21%：快速上手 - Ant Design Vue

优化前ant-design-vue包大小：279.7KB

优化后ant-design-vue包大小：219.8KB

Echarts

这个同样是图表组件库，也是可以尝试通过按需加载方式来优化，官网也有对应的文档：

官网文档，初步估计至少可以优化30%的size，因为我们其实用到的图表类型不多

城市JSON

这个同具体业务同学分析后发现，其实我们只需要省市区的中文名称和唯一ID，不需要cityCode中那么详细的信息，经过JSON简化后大小从130KB降低到52KB

Hls

这个库还是需要的，暂时不做处理

总结

经过上述一系列包大小分析和优化之后，整个包大小从（Gzip后比较）2.07MB降低到了1.32MB，还是卓有成效的，平均子应用加载耗时也降低了35%左右