微信小程序----分包预加载
一,为什么要使用分包预下载小程序的分包能使小程序有更大的代码体积,承载更多的功能与服务;而对用户而言,可以更快地打开小程序,同时在不影响启动速度前提下使用更多功能。但是金无足赤,分包肯定不会只有优点没有缺点。使用分包的时候我们就会发现,虽然加载首页 的时间变短了,但是当我们打开分包的时候,会有一个明显的加载过程。而且在安卓手机里会有一个系统级别的加载loading。那么如何解决分包的这...
一,为什么要使用分包预下载
小程序的分包能使小程序有更大的代码体积,承载更多的功能与服务;而对用户而言,可以更快地打开小程序,同时在不影响启动速度前提下使用更多功能。
但是金无足赤,分包肯定不会只有优点没有缺点。使用分包的时候我们就会发现,虽然加载首页 的时间变短了,但是当我们打开分包的时候,会有一个明显的加载过程。而且在安卓手机里会有一个系统级别的加载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,但是它会对当前页面的加载速度产生较大影响。
更多推荐
所有评论(0)