找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序实现分包预加载

[复制链接]
查看: 134|回复: 1
最佳答案
0 

3

主题

3

帖子

90

积分

新人求带

积分
90
一,为什么要使用分包预下载
小程序的分包能使小程序有更大的葡京赌场网站体积,承载更多的功能与服务;而对用户而言,可以更快地打开小程序,同时在不影响启动速度前提下使用更多功能。

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

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

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

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

app.json:
  1. {
  2.   "pages": ["pages/index"],
  3.   "subpackages": [
  4.     {
  5.       "root": "important",
  6.       "pages": ["index"],
  7.     },
  8.     {
  9.       "root": "sub1",
  10.       "pages": ["index"],
  11.     },
  12.     {
  13.       "name": "hello",
  14.       "root": "path/to",
  15.       "pages": ["index"]
  16.     },
  17.     {
  18.       "root": "sub3",
  19.       "pages": ["index"]
  20.     },
  21.     {
  22.       "root": "indep",
  23.       "pages": ["index"],
  24.       "independent": true
  25.     }
  26.   ],
  27.   "preloadRule": {
  28.     "pages/index": {
  29.       "network": "all",
  30.       "packages": ["important"]
  31.     },
  32.     "sub1/index": {
  33.       "packages": ["hello", "sub3"]
  34.     },
  35.     "sub3/index": {
  36.       "packages": ["path/to"]
  37.     },
  38.     "indep/index": {
  39.       "packages": ["__APP__"]
  40.     }
  41.   }
  42. }
复制葡京赌场网站

其中preloadRulede的配置如下:

20180913151602652.png

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

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

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

三,分包预下载的弊端

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

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

2018091315274642.jpg

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

结论:

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

使用道具 举报

最佳答案
0 

0

主题

239

帖子

1万

积分

S2

积分
10643
发表于 2018-9-14 19:54:41 | 显示全部楼层
顶下再看哈
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.mainetimberworks.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信葡京娱乐网址号

市场合作
[email protected]