百度智能小程序 普通分包
某些情况下，开发者需要将智能小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。
在智能小程序的打包中，默认会有一个主包，主包中包含了启动页面，和所有分包都会用到的公共资源/JS 脚本。而分包则是根据开发者的配置划分的。
整个小程序所有分包大小不超过 8M，单个分包/主包大小不能超过 2M。
在小程序启动时，默认会下载主包并启动主包内页面，如果用户需要打开分包内某个页面，客户端会把对应分包下载下来，下载完成后再进行展示。
将智能小程序按照业务特点合理的分包，可以提升智能小程序的加载速度，优化用户体验。
使用方法
假设支持分包的小程序，目录结构如下：
├── app.js
├── app.json
├── app.css
├── packageA
│ └── pages
│ ├── pageOne
│ │
│ └── pageTwo
│
├── packageB
│ └── pages
│ ├── pageThree
│ │
│ └── pageFour
│
├── pages
│ └── index
│ │
│ └── tabOne
└
开发者通过在 app.json subPackages 字段声明项目分包结构：
{
// 主包，推荐只保留最常用的核心页面：启动页、tab页及公共资源
"pages": [
"pages/index/index",
"pages/tabOne/tabOne"
],
"subPackages": [
{
"root": "packageA/pages",
"name": "packageOne",
"pages": [
"pageOne/pageOne",
"pageTwo/pageTwo"
],
"independent": true
},
{
"root": "packageB/pages",
"name": "packageTwo",
"pages": [
"pageThree/pageThree",
"pageFour/pageFour"
],
"independent": true
}
],
"tabBar": {
"borderStyle": "black",
"color": "#000000",
"selectedColor": "#000000",
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},{
"pagePath": "pages/tabOne/tabOne",
"text": "tabOne"
}]
}
}
主包页面跳转分包页面
<!-- index.swan -->
<view class="navigate-list">
<navigator url="/packageA/pages/pageOne/pageOne" class="navigator">
跳 pageOne
</navigator>
</view>
subPackages 中，每个分包的配置有以下几项：
| 字段 | 类型 | 说明 |
|---|---|---|
| root | String | 分包根目录 |
| name | String | 分包别名。 |
| pages | StringArray | 分包页面路径，相对于分包根目录。 |
| independent | Boolean | 分包是否是独立分包 |
打包原则
- 声明 subPackages 后，将按 subPackages 配置路径进行打包，subPackages 配置路径外的目录将被打包到 app（主包） 中；
- app（主包）也可以有自己的 pages（即最外层的 pages 字段）；
- 首页的 TAB 页面必须在 app（主包）内。
引用原则
- 两个分包之间无法互相引用对方包中的 js，但是分包中可以引用主包，或者自己分包内的 js。