微信小程序主包超2M打包发布成功等相关配置-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序主包超2M打包发布成功等相关配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

期望通过每一次分享，让技术的门槛变低，落地更容易。 —— around

背景

作者公司开发了一个小程序，经过几个版本的迭代，大小超过了2M，研发主要使用的组件是uni-app，前面几个版本包大了我们添加了optimization.subPackages=true的配置，并给不同功能页面完成了分包，到此解决第一阶段包过大的问题。（匹配正文1-2）
过了几个月，我们在新版研发上使用了新的组件uView2.0，它依赖了webpack5，后续使用新版后，optimization.subPackages=true该配置直接会导致开发工具打包编译直接一直死循环，查了一大堆资料和调试，最终找到解决方案，与网络上未谋面的zhijiang3印证了解决方案，留此完成记录。

正文

遇上包过大，在当前时间2022-11-3，微信开发者工具会对主包超过2M的内容进行限制上传，其中最直接体现超过大小的文件大部分情况都是/主包/commom/vendor.js，本次作者的该文件达到了3.1M。

1. 添加编译属性

按需注入
在小程序启动时，启动页面依赖的所有代码包（主包、分包、插件包、扩展库等）的所有 JS 代码会全部合并注入，包括其他未访问的页面以及未用到自定义组件，同时所有页面和自定义组件的 JS 代码会被立刻执行。这造成很多没有使用的代码在小程序运行环境中注入执行，影响注入耗时和内存占用。
```
{
	"lazyCodeLoading": "requiredComponents"
}
```
使用该配置后，需要注意测试，避免小程序在加载的时候表项符合自己的预期。
用时注入
在开启「按需注入」特性的前提下，「用时注入」可以指定一部分自定义组件不在小程序启动时注入，而是在真正渲染的时候才进行注入。
1. 每个页面内，第一次渲染该组件前，该组件都不会被注入；
2. 每个页面内，第一次渲染该组件时，该组件会被渲染为其对应的占位组件，渲染流程结束后开始注入；
3. 注入结束后，占位组件被替换回对应组件。

2. 分包优化

添加优化参数
在自己项目中的manifest.json文件内添加如下内容
```
"optimization": {
	"subPackages": true
}  
```
文件分包
文件分包最重要的部分就是需要注意，诸如下列文件夹直接作用于顶层的需要尽可能的少。不然会导致顶层文件过多和内容增大，编译后超过1.5M是很正常的。
对功能内容超过8个单页的小程序，建议及时分包，将授权、登录、默认页面全部放在顶层，其他业务页面均做分包处理。若已经产生包过大，建议将顶层相关代码直接移至对应业务使用的分包里，不要放在顶层。具体分包配置不做介绍，网上太多。