什么是分包
小程序顾名思义就是体积小、打开速度快,如代码体积过大会影响打开速度,由此诞生主包和分包的概念
在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面 /TabBar
页面,以及一些所有分包都需用到公共资源 /JS
脚本;而分包则是根据开发者的配置进行划分。
在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。
优点
对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。
限制
- 整个小程序所有分包大小不超过 20M
- 单个分包/主包大小不能超过 2M
配置方法
假设支持分包的小程序目录结构如下:
├── app.js
├── app.json
├── app.wxss
├── subPages 分包根路径
│ ├── list
│ └── detail
├── pages
│ ├── index
│ └── logs
└── utils
开发者通过在 app.json subpackages
字段声明项目分包结构:
写成 subPackages 也支持。
{
"pages":[
"pages/index",
"pages/logs"
],
// pages 同级新建 subpackages
"subpackages": [
{
"root": "subPages", // root 代表分包文件夹名称
"pages": [ // 分包下的页面路径
"list/index",
"detail/index"
]
}
]
}
subpackages
中,每个分包的配置有以下几项:
字段 | 类型 | 说明 |
---|---|---|
root | String | 分包根目录 |
name | String | 分包别名,分包预下载时可以使用 |
pages | StringArray | 分包页面路径,相对于分包根目录 |
independent | Boolean | 分包是否是独立分包 |
打包原则
- 声明
subpackages
后,将按subpackages
配置路径进行打包,subpackages
配置路径外的目录将被打包到主包中 - 主包也可以有自己的 pages,即最外层的 pages 字段。
subpackage
的根目录不能是另外一个subpackage
内的子目录tabBar
页面必须在主包内
引用原则
packageA
无法 requirepackageB
JS 文件,但可以 require 主包、packageA
内的 JS 文件;使用 分包异步化 时不受此条限制packageA
无法 importpackageB
的 template,但可以 require 主包、packageA
内的 templatepackageA
无法使用packageB
的资源,但可以使用主包、packageA
内的资源