在小程序开发的过程中,小程序的体积会随着版本的迭代变的越来越大,这时候我们就希望能够将小程序分成多个包从服务器下载,这样既可以加快首屏的渲染也便于后续按需加载的实现。小程序在微信客户端 6.6.0,基础库 1.7.3 及以上版本开始支持分包功能。
在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包的小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。
在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。
配置文件:
{ "pages": ["pages/index", "pages/shopcart"], "subpackages": [ { "root": "packageA", "pages": ["pages/mine", "pages/order"] }, { "root": "packageB", "name": "pack2", "pages": ["pages/detail", "pages/pay"] } ] }
项目目录:
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── mine
│ └── order
├── packageB
│ └── pages
│ ├── pay
│ └── detail
├── pages
│ ├── index
│ └── shopcart
└── utils
打包原则
1 声明 subpackages 后,将按 subpackages 配置路径进行打包,subpackages 配置路径外的目录将被打包到 app(主包) 中;
2 app(主包)也可以有自己的 pages(即最外层的 pages 字段);
3 tabBar 页面必须在 app(主包)内;
引用原则
packageA 无法使用packageB的 JS 文件,但可以 使用 app(主包)、自己 package 内的 JS 文件;