小程序分包
小程序分包是指将小程序的代码按照一定的规则分成多个子包,使得小程序在运行时不需要一次性加载所有代码,而是按需加载,从而加快小程序的启动速度和降低占用的系统资源。分包主要是针对小程序规模较大、页面较多的情况,通过分包技术将小程序的代码划分成多个部分,可以有效地避免小程序过大而导致的加载过慢的问题。对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。
·
1. 分包
小程序分包是指将小程序的代码按照一定的规则分成多个子包,使得小程序在运行时不需要一次性加载所有代码,而是按需加载,从而加快小程序的启动速度和降低占用的系统资源。分包主要是针对小程序规模较大、页面较多的情况,通过分包技术将小程序的代码划分成多个部分,可以有效地避免小程序过大而导致的加载过慢的问题。
对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。
【文档地址】
2. 为什么要分包
- 小程序要求压缩包体积不能大于 2M,否则无法发布
- 实际开发中小程序体积如果大于 2M 就需要使用分包机制进行发布上传
- 分包后可解决 2M 限制,并且能分包加载内容,提高性能
- 分包后单个包的体积不能大于 2M
- 分包后所有包的体积不能大于 20M
3. 主包和分包
- 主包
一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源 - 分包
只包含和当前分包有关的页面和私有资源
4. 分包的加载规则
- 在小程序启动时,默认会下载主包并启动主包内页面
- tabBar 页面需要放到主包中
- 当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示
- 非 tabBar 页面可以按照功能的不同,划分为不同的分包之后,进行按需下载
5. 配置方法
假设支持分包的小程序目录结构如下:
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
开发者通过在 app.json subpackages 字段声明项目分包结构:
{
"pages":[
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
subpackages 中,每个分包的配置有以下几项:
- root
分包根目录 - name
分包别名,分包预下载时可以使用 - pages
分包页面路径,相对于分包根目录 - independent
分包是否是独立分包
6. 打包原则
- 声明 subpackages 后,将按 subpackages 配置路径进行打包,subpackages 配置路径外的目录将被打包到主包中
- 主包也可以有自己的 pages,即最外层的 pages 字段。
- subpackage 的根目录不能是另外一个 subpackage 内的子目录
- tabBar 页面必须在主包内
7. 引用原则
packageA
无法 requirepackageB
JS 文件,但可以require 主包、
packageA` 内的 JS 文件;使用 分包异步化 时不受此条限制packageA
无法 importpackageB
的 template,但可以 require 主包、packageA
内的 templatepackageA
无法使用packageB
的资源,但可以使用主包、packageA
内的资源
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)