起源主要来自我们通过微前端加载一个子应用时,结合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%左右