1. 程式人生 > >微信小程式----分包預載入

微信小程式----分包預載入

一,為什麼要使用分包預下載

小程式的分包能使小程式有更大的程式碼體積,承載更多的功能與服務;而對使用者而言,可以更快地開啟小程式,同時在不影響啟動速度前提下使用更多功能。

但是金無足赤,分包肯定不會只有優點沒有缺點。使用分包的時候我們就會發現,雖然載入首頁 的時間變短了,但是當我們開啟分包的時候,會有一個明顯的載入過程。而且在安卓手機裡會有一個系統級別的載入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,但是它會對當前頁面的載入速度產生較大影響。