小程序系列如何使用分包加载

jiezi

5 年前

在小程序开发的过程中，小程序的体积会随着版本的迭代变的越来越大，这时候我们就希望能够将小程序分成多个包从服务器下载，这样既可以加快首屏的渲染也便于后续按需加载的实现。小程序在 微信客户端 6.6.0，基础库 1.7.3 及以上版本开始支持 分包功能。
在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面 /TabBar 页面，以及一些所有分包都需用到公共资源 /JS 脚本；而分包则是根据开发者的配置进行划分。
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

{"pages": ["pages/index", "pages/shopcart"],
  "subpackages": [
    {
      "root": "packageA",
      "pages": ["pages/mine", "pages/order"]
    },
    {
      "root": "packageB",
      "name": "pack2",
      "pages": ["pages/detail", "pages/pay"]
    }
  ]
}

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── mine
│       └── order
├── packageB
│   └── pages
│       ├── pay
│       └── detail
├── pages
│   ├── index
│   └── shopcart
└── utils

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

packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件
packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源

小程序系列如何使用分包加载

配置方法

配置例子

打包原则

引用原则