微信小程序----分包预加载

本文探讨了小程序分包预下载技术,旨在减少分包加载时间,提升用户体验。介绍了预下载的工作原理、配置方法及对当前页面加载速度的影响。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一,为什么要使用分包预下载

小程序的分包能使小程序有更大的代码体积,承载更多的功能与服务;而对用户而言,可以更快地打开小程序,同时在不影响启动速度前提下使用更多功能。

但是金无足赤,分包肯定不会只有优点没有缺点。使用分包的时候我们就会发现,虽然加载首页 的时间变短了,但是当我们打开分包的时候,会有一个明显的加载过程。而且在安卓手机里会有一个系统级别的加载loading。

那么如何解决分包的这个副作用呢?
其实通过分包预下载就可以轻松避免这个问题。

开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度。对于独立分包,也可以预下载主包。

二,、如何使用分包预下载

分包预下载目前只支持通过配置方式使用,暂不支持通过调用API完成。

app.json:

 {
  "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__"]
    }
  }
}

其中preloadRulede的配置如下:

这里写图片描述

但是要注意预下载的分包体积:

同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验。

如,页面 A 和 B 都在同一个分包中,A 中预下载总大小 0.5M 的分包,B中最多只能预下载总大小 1.5M 的分包。

三,分包预下载的弊端

就像分包那样,分包预下载也有自己的不足。
分包预下载就是在进入小程序某个页面时,提前加载当前页面的下个页面的包。因此,相当于当前页面要加载两个当前页面和下个页面两个包。那么必定会对当前页面的加载速度产生影响。
下面是我做的一个实验:
未使用预下载的时候:
这里写图片描述

接受了39个文件,页面耗时7007ms。
使用预下载的时候:

这里写图片描述

页面加载43个文件,耗时11731ms。

结论:
虽然分包预下载可以避免跳转到具体分包时产生的loading,但是它会对当前页面的加载速度产生较大影响。

### 微信小程序分包预加载实现方式与优化性能 #### 一、分包预加载的概念 微信小程序通过分包机制将整个应用划分为多个独立的小型代码包,每个子包可以在需要时按需加载。为了进一步提升用户体验,可以通过 **分包预加载** 提前下载某些可能被使用的子包,从而减少用户的等待时间[^1]。 --- #### 二、分包预加载实现方法 ##### 1. 配置 `preloadRule` 参数 在小程序项目的 `project.config.json` 文件中配置 `preloadRule` 参数,指定哪些分包需要提前加载以及触发条件。例如: ```json { "miniprogramRoot": "./", "setting": { "urlCheck": true, "es6": true, "postcss": true }, "predefineAppPages": [], "packOptions": { "ignoreCompilerWarning": false }, "condition": {}, "appid": "", "qcloud": { "envId": "" }, "subpackagesPreload": { "rule": [ { "package": "subpackageA", // 子包名称 "triggerPage": ["pages/index/index"], // 触发页面路径 "mode": "onShow" // 加载时机 (onLoad 或 onShow) } ] } } ``` 上述配置表示当用户进入 `pages/index/index` 页面时,会自动启动对 `subpackageA` 的预加载操作[^2]。 --- ##### 2. 使用场景分析 - 如果某个分包的内容可能会很快被访问到,则可以将其设置为预加载目标。 - 对于一些高频次切换的功能模块(如商品详情页),建议优先考虑加入预加载列表。 --- #### 三、优化技巧 ##### 1. 控制主包大小 尽管分包能够有效降低单个文件夹内的数据量,但如果主包过大仍然会影响整体表现效果。因此应严格遵循官方规定——即总容量不得超过20MB的同时保持核心部分小于等于2MB[^3]。 ##### 2. 合理划分逻辑单元 按照业务需求合理规划各个组件之间的关系并分配至不同目录下形成单独打包单位;这样既能满足即时响应又能兼顾长期维护便利性。 ##### 3. 动态调整策略 随着版本迭代更新频率加快,原先设定好的规则也许不再适用当前情况,所以定期审视现有架构并对相应参数做出适当修改就显得尤为重要. --- ### 总结 通过对微信小程序实施有效的分包管理措施加上适时运用预取技术手段不仅可以显著改善初次打开耗时较长这一痛点问题还能极大程度上提高后续交互流畅度给最终用户提供更加满意的体验感受[^2]. ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值