微信小程式----分包預載入
阿新 • • 發佈:2018-11-16
一,為什麼要使用分包預下載
小程式的分包能使小程式有更大的程式碼體積,承載更多的功能與服務;而對使用者而言,可以更快地開啟小程式,同時在不影響啟動速度前提下使用更多功能。
但是金無足赤,分包肯定不會只有優點沒有缺點。使用分包的時候我們就會發現,雖然載入首頁 的時間變短了,但是當我們開啟分包的時候,會有一個明顯的載入過程。而且在安卓手機裡會有一個系統級別的載入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,但是它會對當前頁面的載入速度產生較大影響。