一、分包加載

1. 什么是分包加載

什么是分包加載 ?

小程序的代碼通常是由許多頁面、組件以及資源等組成，隨著小程序功能的增加，代碼量也會逐漸增加，體積過大就會導致用戶打開速度變慢，影響用戶的使用體驗。

分包加載是一種小程序優(yōu)化技術。將小程序不同功能的代碼，分別打包成不同的子包，在構建時打包成不同的分包，用戶在使用時按需進行加載，在構建小程序分包項目時，構建會輸出一個或多個分包。每個使用分包小程序必定含有一個主包。每個分包可以包含多個頁面、組件、樣式和邏輯等。當小程序需要使用某個分包時，才會加載該分包中的代碼。

主包：包含默認啟動頁面 / TabBar 頁面 以及 所有分包都需用到公共資源的包

分包：根據(jù)開發(fā)者的配置進行劃分出來的子包

2、小程序分包后如何加載

在小程序啟動時，默認會下載主包并啟動主包內頁面，在用戶訪問分包內某個頁面時，微信客戶端才會把對應分包下載下來，下載完成后再進行展示。

目前小程序分包大小有以下限制：

• 整個小程序所有分包大小不超過 20MB
• 單個分包/主包大小不能超過 2MB

?? 注意事項：

? 整個小程序所有分包大小可能會隨時調整，截止到目前整個小程序所有分包大小不超過 20M

二、分包的基本使用

知識點：

在進行分包加載之前，需要對小程序的業(yè)務邏輯進行分析，將代碼劃分成多個模塊。每個模塊應該有一個明確的功能，并與其他模塊之間有明確的依賴關系

需要按照功能拆分分包，并且每個分包都需要與其他包有依賴關系(可以通過 a 分包跳轉到 b 分包)

開發(fā)者在小程序的配置文件 app.json 中，通過 subPackages 或者 subpackages字段聲明項目分包結構。

每個分包需要指定 root 字段、name 字段和 pages 字段

root 字段指定了分包的根目錄，該目錄下的所有文件都會被打包成一個獨立的包name 字段為分包的名稱，用于在代碼中引用該分包pages 字段指定了該分包中包含的頁面，可以使用通配符 * 匹配多個頁面

{
  "subPackages": [
    {
      "root": "modules/goodModule",
      "name": "goodModule",
      "pages": [
        "pages/list/list",
        "pages/detail/detail"
      ]
    },
    {
      "root": "modules/marketModule",
      "name": "marketModule",
      "pages": [
        "pages/market/market"
      ]
    }
  ]
}

三、打包和引用原則(注意事項)

1、打包原則：

tabBar 頁面必須在主包內

最外層的 pages 字段，屬于主包的包含的頁面

按 subpackages 配置路徑進行打包，配置路徑外的目錄將被打包到主包中

分包之間不能相互嵌套，subpackage 的根目錄不能是另外一個 subpackage 內的子目錄

2、引用原則：

主包不可以引用分包的資源，但分包可以使用主包的公共資源

分包與分包之間資源無法相互引用， 分包異步化時不受此條限制

四、 獨立分包的配置

1、什么是獨立分包：

獨立分包：獨立分包是小程序中一種特殊類型的分包，可以獨立于主包和其他分包運行。

從獨立分包中頁面進入小程序時，不需要下載主包，但是當用戶進入普通分包或主包內頁面時，主包才會被下載 ！

開發(fā)者可以將功能相對獨立的頁面配置到獨立分包中，因為獨立分包不依賴主包即可運行，可以很大程度上提升分包頁面的啟動速度

如果是獨立分包，不需要下載主包，直接就能夠訪問，獨立分包是自己獨立運行的

而如果是其他分包，需要先下載主包，通過路徑訪問，才能加載對應路徑的分包

?? 注意事項：

獨立分包中不能依賴主包和其他分包中的資源

主包中的 app.wxss 對獨立分包無效

App 只能在主包內定義，獨立分包中不能定義 App，會造成無法預期的行為

2、如何配置獨立分包：

開發(fā)者在app.json中找到需要配置為獨立分包的subpackages字段

在該字段配置項中定義independent字段聲明對應分包為獨立分包。

落地代碼：

{
  "subPackages": [
    {
      "root": "modules/goodModule",
      "name": "goodModule",
      "pages": [
        "pages/list/list",
        "pages/detail/detail"
      ]
    },
    {
      "root": "modules/marketModule",
      "name": "marketModule",
      "pages": [
        "pages/market/market"
      ],
       "independent": true
    }
  ]
}
 

五、分包預下載

知識點：

分包預下載是指訪問小程序某個頁面時，預先下載分包中的代碼和資源，以提高用戶的使用體驗。當用戶需要訪問分包中的頁面時，已經預先下載的代碼和資源可以直接使用，通過分包預下載加快了頁面的加載速度和顯示速度。

小程序的分包預下載需要在 app.json 中通過 preloadRule 字段設置預下載規(guī)則。preloadRule 是一個對象，對象的 key 表示訪問哪個路徑時進行預加載，value 是進入此頁面的預下載配置，具有兩個配置項：

{
  "subPackages": [
    {
      "root": "modules/goodModule",
      "name": "goodModule",
      "pages": [
        "pages/list/list",
        "pages/detail/detail"
      ]
    },
    {
      "root": "modules/marketModule",
      "name": "marketModule",
      "pages": [
        "pages/market/market"
      ],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["modules/goodModule"]
    },
    "modules/marketModule/pages/market/market": {
      "network": "all",
      "packages": ["__APP__"]
    }
  }
}

落地代碼：

{
  "pages": [
    "pages/index/index",
    "pages/user/user"
  ],
  "subPackages": [
    {
      "root": "pages/music",
      "name": "music",
      "pages": [
        "player/player",
        "lyric/lyric"
      ]
    },
    {
      "root": "pages/settings",
      "name": "settings",
      "pages": [
        "theme/theme",
        "language/language"
      ]
    }
  ],
  "preloadRule": {
    "pages/music/player/player": {
      "packages": ["settings"],
      "network": "wifi"
    }
  }
}

到此這篇關于微信小程序---分包加載的文章就介紹到這了,更多相關微信小程序分包內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論