1. 背景
在UniApp项目中,为了提升应用性能、优化加载速度、降低首屏资源占用,我们通常会采用 分包(subPackages) 的模式。
- 主包(main package):包含应用入口、公共页面、全局组件和逻辑,是用户打开小程序 / App 时首先加载的部分;
- 分包(subPackage) :将一些非首屏、独立功能模块的页面拆分成单独的包,按需加载,从而减少主包体积,提升启动速度。
但是在使用过程中出现,不同分包引入同一个npm库,会被重复打入主包中。
官方社区:如何合理的将npm包在多个分包下运行而不会打包进主包?
2. 问题现象
例如,我在pagesL
和pagesN
中均引入了crypto-js
。
通过微信小程序代码依赖分析:
pagesN引入crypto-js

pagesN去除crypto-js

通过分析可得出,如果分包不引入crypto-js
,主包的体积没有变大,如果引入了,会导致体积变大。
3. 如何解决
如何简单快速的解决,就是将pagesN
页面直接引入pagesL
分包中,去除重复引入。
直接移入分包L

移入到pagesL
可以看到主包的体积并没有变大,这算是一个简单的解决方式。
具体解决方式可以参考这篇文章: vue3 uni-app 主包 2 MB 危机?1 个插件 10 分钟瘦身