解决uniapp微信小程序主包及vendor.js过大：uniCloud插件分包方案

问题描述

正常编译后的微信小程序主包大小应控制在2MB以内，超出部分应通过分包机制加载。

然而在某些场景下，微信小程序主包体积可能达到3MB，且vendor.js文件高达1.5MB。

问题解决

若发现微信构建产物中vendor.js仅包含一个文件夹且体积巨大，首先需检查manifest.json配置文件。

在源码视图中找到该文件，定位至mp-weixin节点。

在optimization配置项中，subPackages节点用于控制微信分包行为，需将其值设置为true。

"optimization" : {
    "subPackages" : true
}

对于常规微信小程序项目，启用此节点通常即可解决问题。

但若项目中通过uni_modules引入了大量uni插件，例如uni-id-pages、uni-im、uSearch、uni-pay等uni全家桶组件。

这些页面默认会被打包至主包，因为uni_modules被视为主包的一部分，导致主包中的vendor.js包含了所有主包页面及插件的JS文件，即便执行分包打包后，主包vendor.js依然过大。

此时需对项目中引用的插件进行分包处理，例如将uni-id-pages和uni-im纳入分包范围。

在pages.json中配置分包信息，将原本注册在主包中的插件页面迁移至指定分包。

利用查找替换功能，将uni-id-pages等插件的路径前缀从“uni_modules/uni-id-pages”修改为“subpackageuni/uni-id-pages”。

不建议直接将整个uni_modules目录分包，因为其中可能包含其他需在主包中注册的通用组件。由于子包无法引用子包内的插件，若插件位于子包中，则仅该子包可调用。

同理，将uni-id-pages等插件分包后，这些插件不再适用uni-app的默认组件规则，需手动引入。

在uni-id-pages目录下存在若干组件，分包后这些组件仅在子包内可见。uniapp通过easycom规范自动引入组件，具体机制可参考官方文档：

组件使用的入门教程 | uni-app官网

因此，这些组件需通过Vue语法显式引入至页面。必须在子包内引入，若注册为全局组件，仍会增加vendor.js体积，因为vendor.js会包含全局组件。

通过Vue语法，将所有组件导入至各个页面（为简化操作）。

在每个页面中复制并注册这些组件即可。

完成分包配置后，主包的vendor.js体积将明显减小。

由于uni-id-pages和uni-im已分包，分包中的vendor.js体积会相应增大（即将原主包中的vendor.js转移至分包）。

总结

本文介绍了使用uniapp打包微信小程序时解决主包和vendor.js过大的方法，涉及uniCloud插件的分包处理。更多uniapp打包主包和vendor.js过大相关内容，请搜索本站以往文章或继续浏览后续文章，感谢支持！