使用分包

基础库 3.60.2 及以上版本开始支持独立分包页面,3.170.3 及以上版本开始支持独立分包页面引用自定义组件。


结合智能小程序的启动流程,包下载与解析是整个启动过程中的一种重要阶段,该阶段耗时与小程序页面所属包大小呈正相关,将直接影响到 initData 完成收集的时间,从而影响首屏渲染。

因此,可以采用分包相关技术:使用分包独立分包分包预下载,来优化包处理的几个关键阶段,以减小 initData 的准备时间,最大程度提前首屏渲染起始点。

下述案例对比了未使用分包、使用普通分包、使用独立分包三种不同方式的资源下载耗时(实际可能受网络影响,但耗时趋势一致)。

接下来,我们将介绍使用分包将带来的优势。

# 减小包下载时间

我们以某个小程序为例,在未分包、普通分包和独立分包的情况下,小程序包下载流程如下:

从上图可以了解小程序包下载流程大致过程,总结为:

  1. 如果没有分包,首次启动将下载小程序完整包;
  2. 首次启动普通分包中的页面时,宿主客户端将会下载主包和该页面分包资源;
  3. 首次启动独立分包中的页面时,宿主客户端只下载该页面分包资源。

当清楚小程序包下载过程之后,我们可以将页面进行合理的分包,然后最大程度节省当前页面所属包的下载时间。

# 减小包执行时间

当下载完小程序包之后,其逻辑代码会被加载到适当的线程中执行,执行过程中将会调用基础库底层接口完成初始化工作。

从以下图可以看出三种分包情况下,页面注册与初始化工作耗时情况:

具体工作如下:

  • 如果没有使用分包,将进行以下工作:
    • 执行所有页面 JS 文件及其依赖所有文件;
    • 注册所有页面,调用所有页面的 Page 构造器方法,来记录页面的基础信息(包括初始数据、方法,以及其它的合成过程);
    • 所有页面需要的其它初始化工作。

在此过程中,我们不难看出,除某些高频可能被随即打开的页面,其它页面的逻辑加载执行都是比较浪费启动过程资源的。

  • 如果合理使用分包,在启动过程将只会执行该页面所属包的相关逻辑:
    • 执行该页面所属包中的 JS 文件及其依赖文件;
    • 注册该包中的页面,调用该包中页面的 Page 构造器方法,来记录页面的基础信息(包括初始数据、方法,以及其它的合成过程);
    • 包中页面需要的其它初始化工作。

从以上执行流程,我们可以了解到合理使用分包将会最大程度减小初始化时间。

# 分包预下载

在使用分包加载后,虽然能够显著提升小程序的启动速度,但是当跳转到其它分包页面时,需要等待该分包下载完成后才能打开页面,将会造成页面切换的延迟,影响小程序的使用体验。

分包预下载(swan.loadSubPackage)可以解决首次进入分包页面带来的延迟问题。使用之后,在用户进入分包页面之前就预先将分包下载完成,当用户进入分包页面时就能够更快的启动页面。

以下为分包预下载过程:

开发者可以预先配置某个页面可能会跳转到的分包(当启动页面为独立分包页面时,也可以预下载主包),在进入小程序某个页面时,由基础库在后台自动预下载可能需要的分包。
用户在进行页面跳转时,该分包通常已经下载完成,无需额外等待,可以有效提升进入后续分包页面时的启动速度。