小程序分包

1. 分包

小程序分包是指将小程序的代码按照一定的规则分成多个子包，使得小程序在运行时不需要一次性加载所有代码，而是按需加载，从而加快小程序的启动速度和降低占用的系统资源。分包主要是针对小程序规模较大、页面较多的情况，通过分包技术将小程序的代码划分成多个部分，可以有效地避免小程序过大而导致的加载过慢的问题。

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。
【文档地址】

2. 为什么要分包

1. 小程序要求压缩包体积不能大于 2M，否则无法发布
2. 实际开发中小程序体积如果大于 2M 就需要使用分包机制进行发布上传
3. 分包后可解决 2M 限制，并且能分包加载内容，提高性能
4. 分包后单个包的体积不能大于 2M
5. 分包后所有包的体积不能大于 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 无法 import packageB 的 template，但可以 require 主包、packageA 内的 template
• packageA 无法使用 packageB 的资源，但可以使用主包、packageA 内的资源