小程序分包加载

小程序分包加载

小程序分包加载的出现是为了按需加载，优化小程序的启动时间。

开发者可以可以将小程序分成一个主包和多个子包，这样构建时可以打多个包，当用户进入那个页面时加载那个包的内容。

其中每个小程序必须要有一个主包，主包放着项目启动页面和tabBar页面，还有一个公共资源，当项目启动时只会下载主包里的内容，不会下载子包中的东西。

小程序大小：整个小程序大小不能超过20兆，主包或每个子包不能超过2兆。

具体使用方法：

• 分包
• 独立分包
• 分包预下载
• 分包异步化

分包

在app.json设置subpackages属性

例如：

{
  "subpackages": [
    {
      "root": "pages/face",
      "name": "face",
      "pages": [
        "face/index",
        "a/index"
      ]
    },
    {
      "root": "pages/wx",
      "name": "fa",
      "pages": [
        "a/index",
        "b/index"
      ]
    }
  ],
  "pages": [
    "pages/pagehome/index",
    "pages/login/index"
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

subpackages每个分包都有几个属性

root： String 分包的根目录

name：String 分包的别名

pages：Array 分包的页面路径

independent：Boolean 是否是独立包

打包原则

• pages内的内容会被打包到主包内，subpackages中的内容会打成多个包。
• tabBar页会被打包到主包内。
• 一个子包不能内嵌另一个子包即subpackages中再声明一个subpackages。

引用原则

• 各个子包之间的资源不能引用
• 子包可以引用主包内容

独立分包

独立分包是分包的一种，在subpackages中新增independent属性即可实现该分包变成独立分包。

独立分包可以在主包和其他子包之外运行，意思说不用下载主包也能运行独立包。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GggC6EWd-1662797711182)(D:\Download\softwareDownload\微信公众号\微信截图_20220909104528.png)]

引用原则

• 独立包的资源是私有的不能引入主包里的公共资源
• 独立包与独立包直接的资源不能使用
• 独立包不能引入分包内容

独立包与分包区别

• 独立包不能引入主包内容，分包可以引入主包内容
• 分包必须依赖主包运行

例如：

{
  "subpackages": [
    {
      "root": "pages/face",
      "name": "face",
      "pages": [
        "face/index",
        "a/index"
      ]
    },
    {
      "root": "pages/wx",
      "name": "fa",
      "independent": true,
      "pages": [
        "a/index",
        "b/index"
      ]
    }
  ],
  "pages": [
    "pages/pagehome/index",
    "pages/login/index"
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

分包预下载

可以当用户进入某个页面时，可以提前加载某些分包，可以加快后续页面的加载速度。

配置方法

在app.json中加入preloadRule属性

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "a",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "c",
      "pages": ["index"]
    }
  ],
  "preloadRule": {
    "a/index": {
       "network": "all",
      "packages": ["hello", "c"]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在preloadRule属性中其中key代表用户进入某个页面的路径，value则是配置要预加载的包。

value的配置项：

packages ：StringArray 必填 进入页面后预下载分包的 root 或 name。__APP__ 表示主包

network：String 选填 在指定网络下预下载，可选值为： all: 不限网络 wifi: 仅 wifi 下预下载

注意点：

预下载的包总大小不能超过2兆，比如预加载多个，则多个包总共大小不能超过2兆。

分包异步化

是为了解决包与包之间不能引用各自的资源内容，但可以通过异步化可以实现，包与包之间跨组件，跨方法。通过componentPlaceholder配置

跨组件

就是一个包使用其他包中的自定义组件时，因为其他包还未下载下来，可以为这个自定义组件用其他组件替代，等到下载完成再替换回来。

方法：

1. 当使用一个跨组件时，提前替换相应的标签或组件，比如使用标签view代替button，实现提前占位。
2. 进行下载包并且注入包
3. 将占位组件换成真正的组件

// subPackageA/pages/index.json
{
  "usingComponents": {
    "button": "../../commonPackage/components/button",
    "list": "../../subPackageB/components/full-list",
    "simple-list": "../components/simple-list"
  },
  "componentPlaceholder": {
    "button": "view",
    "list": "simple-list"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

在包``subPackageA引入了包commonPackage中的自定义组件button，在渲染时，会将button渲染成view标签，等包下载完成后再渲染成button`

引入了包subPackageB中的list组件，在渲染时，会将list组件渲染成simple-list组件，等包下载完成后再渲染成list

跨分包JS代码引用

意思是说包A能调用包B的代码或插件，但是为了不阻碍代码下载，需要异步获取内容。

格式：

// subPackageA/index.js
// 使用回调函数风格的调用
require(param, res => {
  console.log(res.a) // Wechat MiniProgram
}, ({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})
// 或者使用 Promise 风格的调用
require.async(param).then(res => {
  res.getPackageName()
}).catch(({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})
1
2
3
4
5
6
7
8
9
10
11
12
13

param 类型String，在调用代码时意思是包B的路径，如果是调用的插件则是插件的名称

res 指调用返回的结果集