微信小程序-分包加载

文章目录

微信小程序-分包加载

微信小程序-分包加载

概述

小程序的代码通常是由许多页面、组件以及资源等组成，随着小程序功能的增加，代码量也会逐渐增加，体积过大就会导致用户打开速度变慢，影响用户的使用体验。

开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

主包： 放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本。

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

小程序分包大小限制：

整个小程序所有分包大小不超过 30M（服务商代开发的小程序不超过 20M）
单个分包/主包大小不能超过 2M

基本使用

配置：

在 app.json 文件中配置 subPackages 声明分包。
每个分包必须指定 root 字段、name 字段、pages 字段：
- root：指定分包的根目录。
- name：指定分包的别名。
- pages：指定分包中包含的页面。

具体代码：

js 复制代码

"subPackages": [
    {
        "root": "modules/goodModule",
        "name": "goodModule",
        "pages": [
            "pages/list/list",
            "pages/detail/detail"
        ]
    },
    {
        "root": "modules/markModule",
        "name": "markModule",
        "pages": [
            "pages/market/market"
        ]
    }
],

查看：

点击右边的"详情" -> "本地代码" -> "代码依赖分析"，可以看到如下，由此可知目前有一个主包和两个分包。

点击主包可查看有3个页面，如下：

跳转分包页面：

主包 -> 分包：

复制代码

<navigator url="/modules/goodModule/pages/list/list">跳转list页面</navigator>

分包 -> 分包：

复制代码

<navigator url="../detail/detail">跳转detail页面</navigator>

打包和引用原则

打包原则：

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

引用原则：

主包不可以引用分包的资源，但分包可以使用主包的公共资源
分包与分包之间资源无法相互引用，分包异步化时不受此条限制

独立分包

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。

如果是独立分包，不需要下载主包，直接就能够访问，独立分包是自己独立运行的。
而如果是其他分包，需要先下载主包，通过路径访问，才能加载对应路径的分包。

注意：

独立分包中不能依赖主包和其他分包中的资源。
主包中的 app.wxss 对独立分包无效。
App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为。

配置：

在 app.json 文件中找到 subPackages 字段，在指定分包中配置 independent 字段。

js 复制代码

"subPackages": [
    {
        "root": "modules/goodModule",
        "name": "goodModule",
        "pages": [
            "pages/list/list",
            "pages/detail/detail"
        ]
    },
    {
        "root": "modules/markModule",
        "name": "markModule",
        "pages": [
            "pages/market/market"
        ],
        "independent": true
    }
]

分包预下载

分包预下载是指访问小程序某个页面时，预先下载分包中的代码和资源，以提高用户的使用体验。当用户需要访问分包中的页面时，已经预先下载的代码和资源可以直接使用，通过分包预下载加快了页面的加载速度和显示速度。

配置：

在 app.json 文件中配置 preloadRule。

preloadRule 是一个对象，key 表示进入的页面，value 表示预下载的配置。

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

复制代码

"preloadRule": {
    // 进入index页面，预下载goodModule分包
    "pages/index/index": {
        "network": "all",
        "packages": ["modules/goodModule"]
    },
    // 进入market页面，预下载主包
    "modules/markModule/pages/market/market": {
        "network": "all",
        "packages": ["__APP__"]
    }
},