1.问题描述

在开发微信小程序时，我们经常会遇到超过2M大小的包无法上传：

2. 解决方案

目前微信小程序分包大小有以下限制：

整个小程序所有分包大小不超过30M（服务商开发的小程序不超过20M）

单个子包/主包大小不能超过2M

网上的优化方法一般有以下几种：

1、图像优化：

(1)静态图片尽量使用网上地址，不要放在项目中：

我们可以将图片上传到图片服务器，小程序通过链接来下载和使用图片。

(2)除此之外，由于只能使用本地资源，所以这个比较小。

(3)图像压缩：可以使用在线压缩工具

2.分包加载：

除页面外，其他页面均进行分包，以保证主包的大小。具体分包方式请参考官方文档：使用分包

3.依赖分离：

使用分包后，你会发现一个奇怪的问题。子包的组件和js文件会被打包到主包的.js文件中，导致.js太大。

检查 .json。在该文件下的源码视图中，mp-下有一个节点，用于控制微信分包。您需要将此节点设置为 true：

"optimization" : { "subpackages" : true }

配置完成后重新运行，你会发现分包后的js文件不再被打包到主包的.js中。 （注：其实有可能是分包引入的js被打包成.js，具体可以参考《:vite配置--对小程序依赖进行可视化分析，减少.js体积》）

4.启用代码压缩：

在以下位置启用运行时压缩代码：

5、小程序的发行：

以上是网上常见的优化方法。如果上述优化仍不能满足要求，可以考虑：

6. 分包和异步化：

这部分涉及到交叉转包自定义组件引用和交叉转包JS代码引用。本文仅讲解交叉分包自定义组件引用的使用和注意事项。交叉分包JS代码的使用参考请参考文档。

本文针对新旧项目整合改造中遇到的包过大的问题，尝试使用交叉分包自定义组件引用。新旧项目各有一个页面，两个页面都引用了比较大的内容。组件，导致主包太大。其中一个页面使用的组件被分为以下子包：

首先解释一下组件：组件使用了qiun-data-组件，qiun-data-引入了u-。 u-组件比较大，而且qiun-data-组件也是分包使用的，所以将页面分成子包，将qiun-data-组件（包括u-和u-组件）与主完全分离包裹。

代码及配置示例如下：

// 主包src/pages/home/index.vue

自定义组件设置占位符组件：

// pages.json { "pages": [ { "path": "pages/home/index", "style": { "navigationBarTitleText": "首页", "usingComponents": { "indicator": "../../subPages/components/indicator/index" }, "componentPlaceholder": { "indicator": "view" } } } ] }

至此，官方文档中对于分包异步的设置已经完成，但是运行这个的时候，可能会报找不到异步分包的组件路径：

在开发者工具中查看代码目录：

确实找不到异步分包组件目录。

原因应该是分包中未使用的部分不会被打包。因此，您可以创建一个新的空页面，并向该页面引入组件：

// src\subPages\asyncSubPage\index.vue

.json 中的注册页面：

"subPackages": [ { "root": "subPages", "pages": [ { "path": "asyncSubPage/index" }, ... ] }, ... ]

至此，位于主包中的一个大组件被分离到一个子包中并异步加载以供使用。最后看一下微信开发者工具中已经出现的组件目录：