paages.json 用于uni-app的全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。类似于微信小程序的app.json页面管理部分。由于各个小程序平台的限制和优化启动速度。所以，我们可能需要用到分包机制——例如，在微信小程序中生成的单个包大于2M时，是不能上传的。
所以，我们使用subPackges和preLoadRule进行分包。
subPackages
定义
分包加载配置，此配置为小程序的分包加载机制。- 因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。
- 分包相对于主包。主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。
- 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。
- App默认为整包。从uni-app 2.7.12+ 开始，也兼容了小程序的分包配置。其目的不用于下载提速，而用于首页是vue时的启动提速。App下开启分包，除在pages.json中配置分包规则外，还需要在manifest中设置在app端开启分包设置，详见：https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization
参数说明
subPackages 节点接收一个数组，数组每一项都是应用的子包，其属性值如下：
| 属性 | 类型 | 是否必填 | 描述 |
| root | String | 是 | 子包的根目录 |
| Pages | Array | 是 | 子包有哪些页面组成。参数详见下表。 |
pages参数说明
pages节点配置应用由哪些页面组成，pages节点接收一个数组，数组每项都是一个对象，其属性如下：
| 属性 | 类型 | 默认值 | 描述 |
| path | String | 配置页面路径 | |
| style | Object | 配置页面窗口的表现，这里与主题无关，不赘述了。 |
注意事项
- subPackages 的pages路径时相对于 root 下的路径，不是全路径。
- 微信小程序每个分包的大小是2M，总体积一共不能超过20M。
- 百度小程序的每个分包的大小时2M,总体积一共不超过8M。
- 支付宝小程序每个分包的大小是2M，总体积一共不超过8M。
- QQ小程序每个分包的大小是2M，总体积一共不超过24M。
- 字节小程序每个分包的大小是2M，总体积一共不能超过16M（字节小程序基础库 1.88.0 及以上版本开始支持，字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本）。
- 分包下支持独立的 static 目录，用来对静态资源进行分包。
- uni-app 内支持微信小程序、QQ小程序、百度小程序、支付宝小程序、
字节小程序(HBuilderX 3.0.3+)分包优化，即将静态资源或者js文件放入分包内不占用主包大小。详情请参考：关于分包优化的说明 - 针对vendor.js 过大的情况，可以使用运行时压缩代码。
HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码cli创建的项目可以在package.json中添加参数--minimize，示例："dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
使用方法
假设分包支持的uni-app目录结构如下:
─pages │ ├─index │ │ └─index.vue │ └─login │ └─login.vue ├─pagesA │ ├─static │ └─list │ └─list.vue ├─pagesB │ ├─static │ └─detail │ └─detail.vue ├─static ├─main.js ├─App.vue ├─manifest.json └─pages.json
则需要在pages.json 中填写。
{ "pages": [{ "path": "pages/index/index", "style": { ...} }, { "path": "pages/login/login", "style": { ...} }], "subPackages": [{ "root": "pagesA", "pages": [{ "path": "list/list", "style": { ...} }] }, { "root": "pagesB", "pages": [{ "path": "detail/detail", "style": { ...} }] }], "preloadRule": { "pagesA/list/list": { "network": "all", "packages": ["__APP__"] }, "pagesB/detail/detail": { "network": "all", "packages": ["pagesA"] } } }
这里 preloadRule 表示分包预配置。提升后续分包页面时的启动速度。
preloadRule
定义
preloadRule表示分包预配置。
配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。
语法
"preloadRule":{key : value }
参数说明
key 表示页面路径， value 是进入页面的预下载配置。每个配置项包含的参数如下：
| 字段 | 类型 | 必填 | 默认值 | 说明 |
| packages | StringArray | 是 | 无 | 进入页面后预下载分包的 root 或 name。__APP__ 表示主包。 |
| network | String | 否 | wifi | 在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载） |
app的分包，同样支持preloadRule，但网络规则无效。