文章目录
- 微信小程序-分包加载
- 概述
- 基本使用
- 打包和引用原则
- 独立分包
- 分包预下载
微信小程序-分包加载
概述
小程序的代码通常是由许多页面、组件以及资源等组成，随着小程序功能的增加，代码量也会逐渐增加，体积过大就会导致用户打开速度变慢，影响用户的使用体验。
开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。
主包： 放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本。
分包： 是根据开发者的配置进行划分。
小程序分包大小限制：
- 整个小程序所有分包大小不超过 30M（服务商代开发的小程序不超过 20M）
- 单个分包/主包大小不能超过 2M
基本使用
配置：
- 在 app.json 文件中配置 subPackages 声明分包。
- 每个分包必须指定 root 字段、name 字段、pages 字段：
- root：指定分包的根目录。
- name：指定分包的别名。
- pages：指定分包中包含的页面。
具体代码：
"subPackages": [
{
"root": "modules/goodModule",
"name": "goodModule",
"pages": [
"pages/list/list",
"pages/detail/detail"
]
},
{
"root": "modules/markModule",
"name": "markModule",
"pages": [
"pages/market/market"
]
}
],
查看：
点击右边的“详情” -> “本地代码” -> “代码依赖分析”，可以看到如下，由此可知目前有一个主包和两个分包。
点击主包可查看有3个页面，如下：
跳转分包页面：
主包 -> 分包：
<navigator url="/modules/goodModule/pages/list/list">跳转list页面</navigator>
分包 -> 分包：
<navigator url="../detail/detail">跳转detail页面</navigator>
打包和引用原则
打包原则：
- 声明
subPackages后，将按subPackages配置路径进行打包，subPackages配置路径外的目录将被打包到主包中 - 主包也可以有自己的 pages，即最外层的 pages 字段。
subPackages的根目录不能是另外一个subPackages内的子目录tabBar页面必须在主包内
引用原则：
- 主包不可以引用分包的资源，但分包可以使用主包的公共资源
- 分包与分包之间资源无法相互引用， 分包异步化时不受此条限制
独立分包
独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。
-
如果是独立分包，不需要下载主包，直接就能够访问，独立分包是自己独立运行的。
-
而如果是其他分包，需要先下载主包，通过路径访问，才能加载对应路径的分包。
注意：
-
独立分包中不能依赖主包和其他分包中的资源。
-
主包中的 app.wxss 对独立分包无效。
-
App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为。
配置：
在 app.json 文件中找到 subPackages 字段，在指定分包中配置 independent 字段。
"subPackages": [
{
"root": "modules/goodModule",
"name": "goodModule",
"pages": [
"pages/list/list",
"pages/detail/detail"
]
},
{
"root": "modules/markModule",
"name": "markModule",
"pages": [
"pages/market/market"
],
"independent": true
}
]
分包预下载
分包预下载是指访问小程序某个页面时，预先下载分包中的代码和资源，以提高用户的使用体验。当用户需要访问分包中的页面时，已经预先下载的代码和资源可以直接使用，通过分包预下载加快了页面的加载速度和显示速度。
配置：
在 app.json 文件中配置 preloadRule。
preloadRule 是一个对象，key 表示进入的页面，value 表示预下载的配置。
| 字段 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| packages | StringArray | 是 | 无 | 进入页面后预下载分包的 root 或 name。__APP__ 表示主包。 |
| network | String | 否 | wifi | 在指定网络下预下载，可选值为： all: 不限网络 wifi: 仅wifi下预下载 |
"preloadRule": {
// 进入index页面，预下载goodModule分包
"pages/index/index": {
"network": "all",
"packages": ["modules/goodModule"]
},
// 进入market页面，预下载主包
"modules/markModule/pages/market/market": {
"network": "all",
"packages": ["__APP__"]
}
},
