29、分包

文档：
分包加载 | 微信开放文档

基础概念

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用的时候进行按需加载。
这样的好处是可以优化小程序首次启动的下载时间，可以在团队开发的时候更好的解耦协作。

分包之前小程序项目所有的页面都被打包到一起，导致项目体积太大，影响小程序首次启动下载时间。

分包之后，小程序项由 1 个主包 + 多个分包组成。
主包：分包之后，小程序包含一个启动页面和TapBar页面，以及所有分包需要用到的一些公共资源。
分包：只包含和当前分包有关的页面和私有资源。

分包的加载规则

1、小程序启动时，默认下载主包并启动主包内页面。

• **tabBar**页面需要放到主包中。

2、当用户进入分包某个页面的时候，客户端会把对应的分包下载下来，下载完成在进行展示。

• 非tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载。

3、分包的体积限制。

• 整个小程序所有包的大小不能超过 16M（主包+所有分包）
• 单个分包/主包大小不能超过 2M

使用分包

文档：
使用分包 | 微信开放文档

例如我们的小程序项目目录如下：

├── app.js ├── app.json ├── app.wxss ├── packageA // 第一个分包 │ └── pages // 第一个分包所有的页面 │ ├── cat │ └── dog ├── packageB // 第二个分包 │ └── pages // 第二个分包所有的页面 │ ├── apple │ └── banana ├── pages // 主包所有的页面 │ ├── index │ └── logs └── utils

进行配置：

{
  // 主包所有的页面
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  // 通过 subpackages 声明分包的结构
  // 有几个对象就表示有几个分包
  "subpackages": [
    {
      // 第一个分包的根目录
      "root": "packageA",
      // 当前分包下，所有页面的相对存放路径
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

实际操作，配置json后保存文件就生成了pkaA文件夹：

subpackages中，每个分包的配置有以下几项（详见文档）：

查看分包的结果：

分包原则

分包的打包原则：
1、小程序会按照subpackages的配置进行分包，subpackages之外的目录会被打包进主包中
2、主包也可以有自己的pages（即最外层的pages字段）
3、**tabBar**页面必须在主包内
4、分包之间不能互相嵌套

分包的引用原则：
1、主包无法引用分包内的私有资源
2、分包之间不能相互引用私有资源
3、分包可以引用主包内的公共资源
4、独立分包不能引入主包内的公共资源

独立分包

文档：
独立分包 | 微信开放文档

独立分包本质上也是分包，只不过他比较特殊，可以独立于主包和其他分包而单独运行。

默认情况下，用户打开小程序，只会打开主包进行操作。

独立分包和普通分包的区别：

• 普通分包必须依赖于主包才能运行
• 独立分包可以在不下载主包的情况下，独立运行

应用场景？
开发者可以按需，将具有一定功能独立性的页面配置到独立分包中，如：

• 小程序从普通分包页面启动时，需首先下载主包。
• 独立分包不依赖于主包即可运行，很大程度上提升了分包页面的启动速度。 :::warning ⚠️ 注意
  一个小程序中可以有多个独立分包。 :::

加入我们的小程序目录：

├── app.js ├── app.json ├── app.wxss ├── moduleA // 普通分包 │ └── pages │ ├── rabbit │ └── squirrel ├── moduleB // 独立分包 │ └── pages │ ├── pear │ └── pineapple ├── pages // 主包所有的页面 │ ├── index │ └── logs └── utils

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      // moduleA 为普通分包
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, 
    {
      // moduleB 为独立分包
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      // independent 配置为 true，声明为独立分包
      "independent": true
    }
  ]
}

分包预下载

文档：
分包预下载 | 微信开放文档

分包预下载指的是：在进入小程序某个页面的时候，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时启动速度。
预下载分包的行为，会在进入指定页面的时候触发。在app.json中，使用preloadRule定义分包的预下载规则。

{
  // 主包
  "pages": ["pages/index"],
  // 分包
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      // 独立分包
      "independent": true
    }
  ],
  // 分包预下载的规则
  "preloadRule": {
    // 在哪个页面触发预下载
    "pages/index": {
      // network 表示指定的网络模式进行预下载（all/wifi）
      "network": "all",
      // 触发 subpackages 下的 important 分包下载
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }
}

分包预下载的限制：
同一个分包中页面享有共同的预下载大小限额为 2M