微信小程序之分包加载的那些事

微信小程序中使用分包加载，可以优化首次启动加载时间。
小程序对包大小的限制为：

1. 单个包或者主包的大小不能超过2M；
2. 整个小程序所有分包的大小不能超过8M；

项目结构

├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── A
│ └── B
├── packageB
│ └── pages
│ ├── C
│ └── D
├── pages
│ ├── index
│ └── logs
└── utils

接着在app.json中配置项目分包结构：

{
	"pages": [
		"pages/index/index",
		"pages/log/log"
	],
	"subpackages": {
		{
			"root": "packageA",	// 分包根目录
			“name”: "packA",	// 分包别名，预下载可以用到
			"pages": [
				"pages/A",  // packageA下的pages
				"pages/B"
			]
		},
		{
			"root": "packageB",
			"pages": [
				"pages/C",  // packageB下的pages
				"pages/D"
			]
		}
	}
}

• 配置subpackages后，将按subpackages配置的路径进行打包，没有配置的都会分到主包。所以一定要配置好路径，避免主包超过限制报错
• tabBar必须放在主包
• 分包之间不能引用，只能require app.js和自身的js
• 配置完分包之后检查主包配置的路径有没有包含分包的，记得去掉主包中分包的路径

预下载

当小程序进入到某个页面的时候，可以先预下载可能需要的分包，提升页面的打开速度

{
	"pages": [
		"pages/index/index",
		"pages/log/log"
	],
	"subpackages": {
		{
			"root": "packageA",	// 分包根目录
			“name”: "packA",	// 分包别名，预下载可以用到
			"pages": [
				"pages/A",  // packageA下的pages
				"pages/B"
			]
		},
		{
			"root": "packageB",
			“name”: "packB",	// 分包别名，预下载可以用到
			"pages": [
				"pages/C",  // packageA下的pages
				"pages/D"
			]
		}
	},
	"preloadRule": {
		"pages/index/index": {
			"network": "all",	// 指定网络下载，all：不限网络，wifi：仅wifi可下载
			"packages": [
				"packA"	// 分包时起的name
			]
		},
		"pages/log/log": {
			"network": "all",
			"packages": [
				"packB"	// 分包时起的name
			]
		}
	}
}

限制

• 同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。

• 如，页面 A 和 B 都在同一个分包中，A 中预下载总大小 0.5M 的分包，B中最多只能预下载总大小 1.5M 的分包。