基础概念
分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用的时候进行按需加载。
这样的好处是可以优化小程序首次启动的下载时间,可以在团队开发的时候更好的解耦协作。
分包之前小程序项目所有的页面都被打包到一起,导致项目体积太大,影响小程序首次启动下载时间。
分包之后,小程序项由 1 个主包 + 多个分包组成。
主包:分包之后,小程序包含一个启动页面和TapBar
页面,以及所有分包需要用到的一些公共资源。
分包:只包含和当前分包有关的页面和私有资源。
分包的加载规则
1、小程序启动时,默认下载主包并启动主包内页面。
**tabBar**
页面需要放到主包中。
2、当用户进入分包某个页面的时候,客户端会把对应的分包下载下来,下载完成在进行展示。
- 非
tabBar
页面可以按照功能的不同,划分为不同的分包之后,进行按需下载。
3、分包的体积限制。
- 整个小程序所有包的大小不能超过 16M(主包+所有分包)
- 单个分包/主包大小不能超过 2M
使用分包
例如我们的小程序项目目录如下:
├── app.js ├── app.json ├── app.wxss ├── packageA // 第一个分包 │ └── pages // 第一个分包所有的页面 │ ├── cat │ └── dog ├── packageB // 第二个分包 │ └── pages // 第二个分包所有的页面 │ ├── apple │ └── banana ├── pages // 主包所有的页面 │ ├── index │ └── logs └── utils
进行配置:
{
// 主包所有的页面
"pages":[
"pages/index",
"pages/logs"
],
// 通过 subpackages 声明分包的结构
// 有几个对象就表示有几个分包
"subpackages": [
{
// 第一个分包的根目录
"root": "packageA",
// 当前分包下,所有页面的相对存放路径
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
实际操作,配置json
后保存文件就生成了pkaA
文件夹:
subpackages
中,每个分包的配置有以下几项(详见文档):
查看分包的结果:
分包原则
分包的打包原则:
1、小程序会按照subpackages
的配置进行分包,subpackages
之外的目录会被打包进主包中
2、主包也可以有自己的pages
(即最外层的pages
字段)
3、**tabBar**
页面必须在主包内
4、分包之间不能互相嵌套
分包的引用原则:
1、主包无法引用分包内的私有资源
2、分包之间不能相互引用私有资源
3、分包可以引用主包内的公共资源
4、独立分包不能引入主包内的公共资源
独立分包
独立分包本质上也是分包,只不过他比较特殊,可以独立于主包和其他分包而单独运行。
默认情况下,用户打开小程序,只会打开主包进行操作。
独立分包和普通分包的区别:
- 普通分包必须依赖于主包才能运行
- 独立分包可以在不下载主包的情况下,独立运行
应用场景?
开发者可以按需,将具有一定功能独立性的页面配置到独立分包中,如:
- 小程序从普通分包页面启动时,需首先下载主包。
- 独立分包不依赖于主包即可运行,很大程度上提升了分包页面的启动速度。
:::warning
⚠️ 注意
一个小程序中可以有多个独立分包。 :::
加入我们的小程序目录:
├── app.js ├── app.json ├── app.wxss ├── moduleA // 普通分包 │ └── pages │ ├── rabbit │ └── squirrel ├── moduleB // 独立分包 │ └── pages │ ├── pear │ └── pineapple ├── pages // 主包所有的页面 │ ├── index │ └── logs └── utils
{
"pages": [
"pages/index",
"pages/logs"
],
"subpackages": [
{
// moduleA 为普通分包
"root": "moduleA",
"pages": [
"pages/rabbit",
"pages/squirrel"
]
},
{
// moduleB 为独立分包
"root": "moduleB",
"pages": [
"pages/pear",
"pages/pineapple"
],
// independent 配置为 true,声明为独立分包
"independent": true
}
]
}
分包预下载
分包预下载指的是:在进入小程序某个页面的时候,由框架自动预下载可能需要的分包,从而提升进入后续分包页面时启动速度。
预下载分包的行为,会在进入指定页面的时候触发。在app.json
中,使用preloadRule
定义分包的预下载规则。
{
// 主包
"pages": ["pages/index"],
// 分包
"subpackages": [
{
"root": "important",
"pages": ["index"],
},
{
"root": "sub1",
"pages": ["index"],
},
{
"name": "hello",
"root": "path/to",
"pages": ["index"]
},
{
"root": "sub3",
"pages": ["index"]
},
{
"root": "indep",
"pages": ["index"],
// 独立分包
"independent": true
}
],
// 分包预下载的规则
"preloadRule": {
// 在哪个页面触发预下载
"pages/index": {
// network 表示指定的网络模式进行预下载(all/wifi)
"network": "all",
// 触发 subpackages 下的 important 分包下载
"packages": ["important"]
},
"sub1/index": {
"packages": ["hello", "sub3"]
},
"sub3/index": {
"packages": ["path/to"]
},
"indep/index": {
"packages": ["__APP__"]
}
}
}
分包预下载的限制:
同一个分包中页面享有共同的预下载大小限额为 2M