微信小程序-分包加载

文章目录

微信小程序-分包加载

概述

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

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

主包: 放置默认启动页面/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 页面必须在主包内

引用原则:

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

独立分包

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

  • 如果是独立分包,不需要下载主包,直接就能够访问,独立分包是自己独立运行的。

  • 而如果是其他分包,需要先下载主包,通过路径访问,才能加载对应路径的分包。

注意:

  1. 独立分包中不能依赖主包和其他分包中的资源。

  2. 主包中的 app.wxss 对独立分包无效。

  3. 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 进入页面后预下载分包的 rootname__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__"]
    }
},
相关推荐
丁总学Java39 分钟前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域2 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165023 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦10 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac12 小时前
微信小程序的组件
微信小程序
stormjun14 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck14 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23416 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong16 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序