一、分包加載

1. 什么是分包加載

什么是分包加載 ?

小程序的代碼通常是由許多頁(yè)面、組件以及資源等組成，隨著小程序功能的增加，代碼量也會(huì)逐漸增加，體積過(guò)大就會(huì)導(dǎo)致用戶打開(kāi)速度變慢，影響用戶的使用體驗(yàn)。

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

主包：包含默認(rèn)啟動(dòng)頁(yè)面 / TabBar 頁(yè)面 以及 所有分包都需用到公共資源的包

分包：根據(jù)開(kāi)發(fā)者的配置進(jìn)行劃分出來(lái)的子包

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

在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁(yè)面，在用戶訪問(wèn)分包內(nèi)某個(gè)頁(yè)面時(shí)，微信客戶端才會(huì)把對(duì)應(yīng)分包下載下來(lái)，下載完成后再進(jìn)行展示。

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

• 整個(gè)小程序所有分包大小不超過(guò) 20MB
• 單個(gè)分包/主包大小不能超過(guò) 2MB

?? 注意事項(xiàng)：

? 整個(gè)小程序所有分包大小可能會(huì)隨時(shí)調(diào)整，截止到目前整個(gè)小程序所有分包大小不超過(guò) 20M

二、分包的基本使用

知識(shí)點(diǎn)：

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

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

開(kāi)發(fā)者在小程序的配置文件 app.json 中，通過(guò) subPackages 或者 subpackages字段聲明項(xiàng)目分包結(jié)構(gòu)。

每個(gè)分包需要指定 root 字段、name 字段和 pages 字段

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

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

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

1、打包原則：

tabBar 頁(yè)面必須在主包內(nèi)

最外層的 pages 字段，屬于主包的包含的頁(yè)面

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

分包之間不能相互嵌套，subpackage 的根目錄不能是另外一個(gè) subpackage 內(nèi)的子目錄

2、引用原則：

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

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

四、 獨(dú)立分包的配置

1、什么是獨(dú)立分包：

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

從獨(dú)立分包中頁(yè)面進(jìn)入小程序時(shí)，不需要下載主包，但是當(dāng)用戶進(jìn)入普通分包或主包內(nèi)頁(yè)面時(shí)，主包才會(huì)被下載 ！

開(kāi)發(fā)者可以將功能相對(duì)獨(dú)立的頁(yè)面配置到獨(dú)立分包中，因?yàn)楠?dú)立分包不依賴主包即可運(yùn)行，可以很大程度上提升分包頁(yè)面的啟動(dòng)速度

如果是獨(dú)立分包，不需要下載主包，直接就能夠訪問(wèn)，獨(dú)立分包是自己獨(dú)立運(yùn)行的

而如果是其他分包，需要先下載主包，通過(guò)路徑訪問(wèn)，才能加載對(duì)應(yīng)路徑的分包

?? 注意事項(xiàng)：

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

主包中的 app.wxss 對(duì)獨(dú)立分包無(wú)效

App 只能在主包內(nèi)定義，獨(dú)立分包中不能定義 App，會(huì)造成無(wú)法預(yù)期的行為

2、如何配置獨(dú)立分包：

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

在該字段配置項(xiàng)中定義independent字段聲明對(duì)應(yīng)分包為獨(dú)立分包。

落地代碼：

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

五、分包預(yù)下載

知識(shí)點(diǎn)：

分包預(yù)下載是指訪問(wèn)小程序某個(gè)頁(yè)面時(shí)，預(yù)先下載分包中的代碼和資源，以提高用戶的使用體驗(yàn)。當(dāng)用戶需要訪問(wèn)分包中的頁(yè)面時(shí)，已經(jīng)預(yù)先下載的代碼和資源可以直接使用，通過(guò)分包預(yù)下載加快了頁(yè)面的加載速度和顯示速度。

小程序的分包預(yù)下載需要在 app.json 中通過(guò) preloadRule 字段設(shè)置預(yù)下載規(guī)則。preloadRule 是一個(gè)對(duì)象，對(duì)象的 key 表示訪問(wèn)哪個(gè)路徑時(shí)進(jìn)行預(yù)加載，value 是進(jìn)入此頁(yè)面的預(yù)下載配置，具有兩個(gè)配置項(xiàng)：

{
  "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"
    }
  }
}

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

最新評(píng)論