小程序分包

将一个完整的小程序项目，按照不同的需求划分成不同的子包，在构建时打包成不同的包，用户在使用是按需加载

小程序分包以后，小程序由一个主包 + 多个分包组成

主包：TabBar 页面 + 公共资源
分包：页面 + 私有资源

限制

  • 所有分包加上主包不能超过 16MB
  • 每个包（分包、主包）不能超过 2MB

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

在 app.json 文件中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

全部的分包需要在 subpackages 节点中设置

  • root：分包文件夹名称
  • pages：分包页面路径，相对路径
  • name：分包的别名

打包原则

  • 小程序会根据 subpackages 的配置进行分包，subpackages 之外的目录打包至主包中
  • 主包也有自己的 pages
  • TabBar 页面必须在主包中
  • 分包之间不能嵌套

引用原则

  • 主包无法引用分包的私有资源
  • 分包之间不能互相引用私有资源
  • 分包可以引用主包中的公共资源

独立分包

独立分包本质上还是分包，但它比较特殊，独立分包可以独立于主包和其他分包单独运行

普通的分包页面启动时，都需要首先下载主包，而独立分包可以不依赖于主包，独立运行，可以==提高小程序的分包页面的启动速度==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "pages": [
        "pages/apple",
        "pages/banana"
      ],
   "independent": true
    }
  ]
}

上面配置中，将 packageB 为独立分包
设置独立分包，只要将 independent 配置项设置为 true 即可

==独立分包是·不能引用主包的公共资源的==

分包预下载

由小程序框架自动预下载可能需要的分包，提高分包页面的启动速度

分包预下载行为，会在进入指定页面时触发

在 app.json 中配置

1
2
3
4
5
6
7
8
{
 "preloadRule":{  // 分包预下载规则
  "pages/content/content":{  // 预下载触发页面路径
   "network": "all"
   "packages": ["packageA"]
  }
 }
}

  • network：预下载时的网络模式

    • wifi：默认值，WiFi模式下才进行下载
    • all：所有模式下都进行下载

  • packages：预下载的分包，可以使用 root 或 name

同一个分包的共同预下载大小限额为 2MB