# 分包配置

当您的快应用体积过大的时候,可以使用分包加载功能,简单来说,就是将项目中的所有页面及资源通过配置规则划分到多个单独的分包文件中,运行时单独下载,加快页面渲染。这些分包中包含一个主包和多个分包,并且在快应用运行的过程中,优先加载主包和页面所在的包,其他的包在后台运行。

目前包的体积限制

  • 整个快应用的所有分包大小不超过 8M
  • 单个分包/主包大小不能超过 2M

为达到最佳的分包效果,可以参考以下建议进行分包配置:

  • 首页建议保留在主包中
  • 业务逻辑上密切相关的页面配置在同一个分包中
  • 主包放置公共资源,单个分包独有的资源放置到分包中,以减小主包大小

# 配置方法

假设您的项目目录如下:

project
│   app.js
├── app.json
├── app.css
└───packageA
│   └───pages
│       │   page-a
│       │   page-b
└───packageB
│    └───pages
│        │  page-c
│        │  page-d
└───pages
│   │   index
│   │   logs
└───utils
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

那么在app.json中的分包配置为

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/page-a",
        "pages/page-b"
      ]
    }, {
      "root": "packageB",
      "pages": [
        "pages/page-c",
        "pages/page-d"
      ]
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

每个分包的配置项有以下几项:

字段 类型 说明
root string 分包根目录
name string 分包别名,分包预下载时可以使用
pages StringArray 分包页面路径,相对与分包根目录

# 引用原则

  • 分包可以依赖主包的资源,不能依赖其他分包的资源

# 打包原则

  • 声明 subpackages 后,将按照 subpackages 配置的资源路径进行打包, subpackages 配置路径以外的目录将被打包到主包中
  • 主包也能包含自己的 pages ,打包时会依据路径的规则将 pages 内的页面划分到对应的分包中,subpackages 配置路径以外的页面将保留在主包中
  • 分包的根目录不能是另外一个分包的子目录

在线客服