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 内的资源

 

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐