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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/css_666/article/details/82688651
一,为什么要使用分包预下载

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

但是金无足赤,分包肯定不会只有优点没有缺点。使用分包的时候我们就会发现,虽然加载首页 的时间变短了,但是当我们打开分包的时候,会有一个明显的加载过程。而且在安卓手机里会有一个系统级别的加载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,但是它会对当前页面的加载速度产生较大影响。

猜你喜欢

转载自blog.csdn.net/css_666/article/details/82688651