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

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

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

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