【uniapp&微信小程序】小程序分包加载机制与配置

前言

        因为小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。

分包配置

        目前微信小程序每个分包的大小是2M，总体积一共不能超过20M，要实现分包，小程序分包目录结构需如下：

┌─pages
│  ├─index
│  │  └─index.vue
│  └─login
│     └─login.vue
├─pagesA
│  ├─static
│  └─pages
│      ├─pagesA1
│      │  └─pagesA1.vue
│      └─pagesA2
│         └─pagesA2.vue
├─pagesB
│  ├─static
│  └─pages
│      ├─pagesB1
│      │  └─pagesB1.vue
│      └─pagesB2
│         └─pagesB2.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

 以上是项目文件位置，接下来需配置pages.json文件,通过subpackages创建分包：

	"subPackages": [ //通过subpackages节点创建分包结构
		{
		  "root": "pagesA", //分包的根目录
          "name": "pA", //可设置分包别名
		  "pages": [ //当前分包下的所有页面的相对存放路径
			{
			  "path": "pages/pagesA1/pagesA1",
			  "style": {
				"navigationBarTitleText": "分包pagesA下pagesA1页面"
			  }
			},
			{
			  "path": "pages/pagesA2/pagesA2",
			  "style": {
				"navigationBarTitleText": "分包pagesA下pagesA2页面",
			  }
			}]
		},
		{
		"root": "pagesB",
		"pages": [
			{
			"path": "pages/pagesB1/pagesB1",
			"style": {
				"navigationBarTitleText": "分包pagesB下pagesB1页面"
			}
			},
			{
			"path": "pages/pagesB2/pagesB2",
			"style": {
				"navigationBarTitleText": "分包pagesB下pagesB2页面"
			}
			}]
		}
	],

subPackages 节点接收一个数组，数组每一项都是应用的子包，其属性值如下：

属性	类型	是否必填	描述
root	String	是	子包的根目录
pages	Array	是	子包由哪些页面组成，参数同 pages

配置完成后打开微信开发者工具，右上角详情按钮打开查看基本信息：

 这里可以看到我们成功创建了pagesA与pagesB分包。

分包的引用原则

需要注意，一旦创建了分包，那么主包无法引用分包内的私有资源（如img等），分包之间也不能互相引用私有资源，但分包可以引用主包资源。

 

分包预下载

分包预下载指的是在进入某个指定页面，下载需要的分包资源，这一功能可pages.json文件,通过preloadRule节点定义分包预下载的规则，preloadRule中，key是页面路径，value是进入该页面的预下载配置，其配置项如下：

字段	类型	必填	默认值	说明
packages	StringArray	是	无	需要预下载的包名，可填分包root或name，_APP_表示主包。
network	String	否	wifi	在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）

"preloadRule": {
		"pagesA/list/list": { //触发分包预下载的页面路径
			"network": "all", //表示在指定的网络模式下进行预下载
			"packages": ["__APP__"] //表示进入页面之后，预下载哪些分包
		},
		"pagesB/detail/detail": {
			"network": "all",
			"packages": ["pagesA"]
		}
	}

总结

        到这里关于分包配置就完成啦，解决了以往所有页面和资源都打包在一起，导致项目体积过大所造成的性能问题，并且在团队开发时可以更好的解耦协作 

---

推荐阅读

[uniapp&微信小程序]vue3+ts+vite+pinia+eslint+prettier+husky项目搭建

快速搞懂Pinia及数据持久化存储(详细教程)

多终端响应式开发（Bootstrap栅格系统原理及实现)

Print.js实现打印pdf，HTML，图片(可设置样式可分页)