在微信小程序项目开发的过程，随着业务需求的增长，程序包也来越大，总所周知，微信对于小程序代码包 是有要求的，总体积不得超过2M，所以我们必须对小程序进行分包。

分包的优点

  1. 减少初始加载时间。如果整个小程序页面非常庞大，包含了大量的文件代码，那么初始加载就会耗费大量的时间，影响用户体验。
  2. 按需更新维护。通过将不同功能的模块或页面分离到不同的包中，可以实现独立的更新和维护。

小程序启动时，默认下载主包并启动主包内的页面，当用户进入分包内的某个页面时，客户端会把对应的分包下载下来。

如何分包

微信小程序每个分包大小 不得超过2M，总体积不超过20M。如果支持分包的小程序目录如下

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中的subpackages字段声明项目分包结构

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 String 分包根目录
name String 分包别名，分包预下载时可以使用
pages StringArray 分包页面路径，相对于分包根目录
independent Boolean 分包是否独立分包

引用原则

  • packageA无法require package JS文件，但可以 require 主包、packageA 内的 JS 文件；使用 分包异步化 时不受此条限制
  • packageA 无法 import packageB 的 template，但可以 require 主包、packageA 内的 template
  • packageA 无法使用 packageB 的资源，但可以使用主包、packageA 内的资源

打包原则

  • 声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到主包中
  • 主包也可以有自己的 pages，即最外层的 pages 字段。
  • subpackage 的根目录不能是另外一个 subpackage 内的子目录
  • tabBar 页面必须在主包内