小程序 分包加载

Question

一、分包加载

每个使用分包小程序必定含有一个主包，主包主要功能为默认启动 页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；

分包则是根据开发者的配置进行划分。

分包限制

• 整个小程序所有分包的总和大小不超过 20M
• 单个分包/主包大小不能超过 2M

如何分包？

假设支持分包的小程序目录结构如下：

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

还要在 app.json 文件中配置：

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [ // 每个数组元素代表一个分包
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, 
    {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

分包的配置项

字段	类型	说明
root	String	分包根目录
name	String	分包别名， 分包预下载 时可以使用
pages	StringArray	分包页面路径，相对与分包根目录
independent	Boolean	分包是否是 独立分包

主/分包 打包原则

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

分包引用原则

1. 分包 packageA 无法 require 分包 packageB JS 文件，但可以 require 主包 app 以及自己 package 内的 JS 文件
2. 分包 packageA 无法 import 分包 packageB 的 template，但可以 require 主包 app 以及自己 package 内的 template
3. 分包 packageA 无法使用分包 packageB 的资源，但可以使用主包 app 以及自己 package 内的资源

二、独立分包

1. 独立分包可以独立于主包和其他分包运行，独立分包中不能依赖主包和其他分包中的内容，包括js 文件、template、wxss、自定义组件、插件等。主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式。
2. 从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。
3. 开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。一个小程序中可以有多个独立分包。
4. 独立分包中暂时不支持使用插件
5. 在低于 6.7.2 版本的微信中运行时，独立分包视为普通分包处理，不具备独立运行的特性。
6. App 只能在主包内定义，独立分包中不能定义 App 。因为独立分包运行时， App 并不一定被注册，因此 getApp() 也不一定可以获得 App 对象，会造成无法预期的行为。

//为了在独立分包中满足这一需求，基础库 2.2.4 版本开始 getApp 支持 [allowDefault]参数，
//在 App 未定义时返回一个默认实现。当主包加载，App 被注册时，默认实现中定义的属性会被覆盖合并到真正的 App 中

// 独立分包中
const app = getApp({allowDefault: true}) // {}
app.data = 456
app.global = {}

// app.js 中
App({
  data: 123,
  other: 'hello'
})
console.log(getApp()) // { global: {}, data: 456, other: 'hello' }

如何独立分包？

假设支持分包的小程序目录结构如下：

├── app.js
├── app.json
├── app.wxss
├── moduleA
│   └── pages
│       ├── rabbit
│       └── squirrel
├── moduleB
│   └── pages
│       ├── pear
│       └── pineapple
├── pages
│   ├── index
│   └── logs
└── utils

还要在 app.json 中设置 独立分包配置项 independent ：

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, 
    {
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true //该字段声明对应分包为独立分包
    }
  ]
}

独立分包的生命周期

1. 当从独立分包启动小程序时，主包中 App 的 onLaunch 和首次 onShow 会在从独立分包页面首次进入主包或其他普通分包页面时调用。
2. 由于独立分包中无法定义 App ，因此在独立分包中监听小程序的生命周期可以使用 wx.onAppShow ， wx.onAppHide 完成，而 App 上的其他事件可以使用 wx.onError ， wx.onPageNotFound 监听。

三、分包预下载

预下载分包行为在进入某个页面时触发，通过在 app.json 增加 preloadRule 配置来控制

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"] // 主包
    }
  }
}

preloadRule 中， key 是页面路径， value 是进入此页面的预下载配置，每个配置有以下几项：

字段	类型	必填	默认值	说明
packages	StringArray	是	无	进入页面后预下载分包的 root 或 name 。 __APP__ 表示主包。
network	String	否	wifi	在指定网络下预下载，可选值为： all : 不限网络， wifi : 仅 wifi 下预下载