小程序上传的时候，主包不能超过2M，如果超出，则会上传失败，这时候就需要把界面进行分包，还有static下面的图片，尽量使用服务器的。

1.查看项目结构

通过上方三个问题，我们开始具体分包流程，首先看一下分包前项目结构及pages.json配置文件

pages.json
{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/card/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/device/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/order/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/product/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

2.分析主包大小

微信开发者工具中，查看【详情】进行分析，此处本地代码只有一个主包大小399.8KB

3.参考文档

本文以uniapp为实操介绍案例

小程序官方文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

uniapp 分包文档：

https://uniapp.dcloud.net.cn/collocation/pages.html#subpackages

4. 结构调整

将咱们项目结构按照如下图所示进行拆分

新建subPages_A 和 subPages_B，将pages下不同页面移入进新增的两个包，此处subPages_A的名字只做示例，实际要按照标准命名！

比较下之前项目结构，此处项目会报错，不用担心，稍后修改pages.json

5. 修改pages.json

根据上一步拆分的包路径，进行配置文件的调整，此处注意"subPackages" 要和 "pages" 同级

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"subPackages": [{
		"root": "pages/subPages_A",
		"pages": [{
				"path": "card/index",
				"style": {
					"navigationBarTitleText": "card"
				}
			},
			{
				"path": "device/index",
				"style": {
					"navigationBarTitleText": "device"
				}
			}
		]
	}, {
		"root": "pages/subPages_B",
		"pages": [{
				"path": "order/index",
				"style": {
					"navigationBarTitleText": "order"
				}
			},
			{
				"path": "product/index",
				"style": {
					"navigationBarTitleText": "product"
				}
			}
		]
	}],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

这里的意思是将主包拆成subPages_A和subPages_B两个子包，对比下之前的配置

启动测试

启动后查看微信开发者工具，查看【详情】可看到主包大小降为326.0kb，并且下方还有subPages_A和subPages_B两个子包

比较之前包大小，分包成功！

特别注意

🎯 如果设计代码中路径问题，需要调成最新包结构路径。例如

拆包前跳转到对应设备页面

uni.navigateTo({
	url:'/pages/device/index'
})

拆包后跳转到对应设备页面

uni.navigateTo({
	url:'/pages/subPages_A/device/index'
})

https://cloud.tencent.com/developer/article/2455110