本文基于微信小程序的官方文檔，對分包的概念以及具體的操作流程進(jìn)行講解。

一、為什么要使用分包？

主要原因就是微信小程序規(guī)定了主包大小不能超過 2M ，但我們隨著開發(fā)的更新迭代，一個小程序往往是大于 2M 的。于是小程序提供了分包的解決方法，將一個完整的的小程序，在打包時分成不同功能或需求的分包，在用戶使用時再加載對應(yīng)的分包。

主包：使用分包后必須有一個主包，用于存放 TabBar 頁面，以及一些公共的資源文件和JS腳本。

分包：從主包上拆分而來的文件，個人建議的的拆分方式：先根據(jù) TabBar 頁面拆分大的模塊，再拆分每個 TabBar內(nèi)具體的小功能模塊，這樣拆分管理起來也更加清晰明了。

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

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

二、使用分包

1、基本配置

我們先看看官方給出的目錄結(jié)構(gòu)和 app.josn 的配置：

• 目錄結(jié)構(gòu)

  ├── app.js
  ├── app.json---------分包配置文件
  ├── app.wxss
  ├── packageA---------分包A
  │   └── pages
  │       ├── cat
  │       └── dog
  ├── packageB---------分包B
  │   └── pages
  │       ├── apple
  │       └── banana
  ├── pages------------主包
  │   ├── index
  │   └── logs
  └── utils
  

• app.json 配置

  {
    "pages":[
      "pages/index",
      "pages/logs"
    ],
    "subpackages": [
      {
        "root": "packageA",
        "pages": [
          "pages/cat",
          "pages/dog"
        ]
      }, {
        "root": "packageB",
        "name": "pack2",
        "pages": [
          "pages/apple",
          "pages/banana"
        ]
      }
    ]
  }
  

  app.json 參數(shù)說明：

  • pages：主包 List ，默認(rèn)以一個路徑為主頁，放置 TabBar 的頁面，放在根目錄下的 pages 文件夾內(nèi)。

  • subpackages：分包 List ，官方的分包是默認(rèn)放在根目錄下的，實(shí)際上可以根據(jù)自身需要配置路徑，下文將根據(jù)官方的 demo 展示。

    字段	類型	說明
    root	String	分包根目錄，默認(rèn)是從根目錄開始
    name	String	分包別名，分包預(yù)下載 時可以使用
    pages	StringArray	分包頁面路徑，相對于分包根目錄
    independent	Boolean	分包是否是 獨(dú)立分包

2、demo 案例分析

下載 小程序示例（分包加載版）源碼

為了看起來更清晰，我刪除了部分重復(fù)文件，但保留了 demo 本身的目錄結(jié)構(gòu)?？?demo 不難看出無論是分包還是主包，都是放在 page 這個文件夾下面的，這說明分包所在位置并沒有嚴(yán)格的要求，可以根據(jù)自身的需求配置路徑放置。

此外我們還需要注意到，主包和分包的默認(rèn)路徑是從根目錄開始的，分包的路徑是以 root 內(nèi)的設(shè)置的路徑為起始。

3、打包原則

• 聲明 subpackages 后，將按 subpackages 配置路徑進(jìn)行打包，subpackages 配置路徑外的目錄將被打包到主包中。也就是沒指定分包的文件都會被打包到主包。
• 主包也可以有自己的 pages，即最外層的 pages 字段。
• subpackage 的根目錄不能是另外一個 subpackage 內(nèi)的子目錄。也就是不能在分包內(nèi)放置另外一個另外一個分包，兩者必須是平級的關(guān)系。
• tabBar 頁面必須在主包內(nèi)。

4、引用原則

省流：除了分包異步化可以請求不同包的 JS 文件，其他情況下的分包都只能訪問自身的和主包的文件。

• packageA 無法 require packageB JS 文件，但可以 require 主包、packageA 內(nèi)的 JS 文件；使用 分包異步化 時不受此條限制。
• packageA 無法 import packageB 的 template，但可以 require 主包、packageA 內(nèi)的 template。
• packageA 無法使用 packageB 的資源，但可以使用主包、packageA 內(nèi)的資源。

5、低版本兼容

由微信后臺編譯來處理舊版本客戶端的兼容，后臺會編譯兩份代碼包，一份是分包后代碼，另外一份是整包的兼容代碼。 新客戶端用分包，老客戶端還是用的整包，完整包會把各個 subpackage 里面的路徑放到 pages 中。

三、獨(dú)立分包

版本支持：微信客戶端 6.7.2，基礎(chǔ)庫 2.3.0 及以上版本開始支持。開發(fā)者工具請使用 1.02.1808300 及以上版本，可 點(diǎn)此下載。

獨(dú)立分包顧名思義就是可以獨(dú)立于主包和其他分包運(yùn)行的一種特殊分包。從獨(dú)立分包頁面進(jìn)入小程序時無需下載主包，當(dāng)用戶進(jìn)入普通分包或主包頁面的時候才會下載主包資源。

我們在開發(fā)時，可以選擇一些從公眾號進(jìn)入的頁面，或是調(diào)用webview的頁面配置到我們的獨(dú)立分包。因?yàn)椴挥孟螺d主包，可以很大程度上提高獨(dú)立分包頁面的啟動速度。

一個小程序中可以有多個獨(dú)立分包。

1、開啟獨(dú)立分包

開發(fā)者通過在app.json的subpackages字段中對應(yīng)的分包配置項中定義independent字段聲明對應(yīng)分包為獨(dú)立分包。

{
  "root": "moduleB",
  "pages": [
    "pages/pear",
    "pages/pineapple"
  ],
  "independent": true
}

2、限制

獨(dú)立分包屬于分包的一種。普通分包的所有限制都對獨(dú)立分包有效。獨(dú)立分包中插件、自定義組件的處理方式同普通分包。

此外，使用獨(dú)立分包時要注意：

• 除了使用 分包異步化 的 js 文件、自定義組件、插件外，獨(dú)立分包不依賴主包和其他分包內(nèi)的內(nèi)容。
• 主包中的 app.wxss 對獨(dú)立分包無效，應(yīng)避免在獨(dú)立分包頁面中使用 app.wxss 中的樣式，全局樣式不生效。
• App 只能在主包內(nèi)定義，獨(dú)立分包中不能定義 App，會造成無法預(yù)期的行為。
• 獨(dú)立分包中暫時不支持使用插件。

3、注意事項

（1）關(guān)于 getApp()

獨(dú)立分包運(yùn)行時，App 并不一定被注冊，因此 getApp() 也不一定可以獲得 App 對象：

• 當(dāng)用戶從獨(dú)立分包頁面啟動小程序時，主包不存在，因此App也不存在，此時調(diào)用 getApp() 獲取到的是 undefined。 當(dāng)用戶進(jìn)入普通分包或主包內(nèi)頁面時，主包才會被下載，App 才會被注冊。
• 當(dāng)用戶是從普通分包或主包內(nèi)頁面跳轉(zhuǎn)到獨(dú)立分包頁面時，主包已經(jīng)存在，此時調(diào)用 getApp() 可以獲取到真正的 App。

由于這一限制，開發(fā)者無法通過 App 對象實(shí)現(xiàn)獨(dú)立分包和小程序其他部分的全局變量共享。

為了在獨(dú)立分包中滿足這一需求，基礎(chǔ)庫 2.2.4 版本開始 getApp 支持 [allowDefault] 參數(shù)，在 App 未定義時返回一個默認(rèn)實(shí)現(xiàn)。當(dāng)主包加載，App 被注冊時，默認(rèn)實(shí)現(xiàn)中定義的屬性會被覆蓋合并到真正的 App 中。

示例代碼：

• 獨(dú)立分包中

const app = getApp({allowDefault: true}) // {}
app.data = 456
app.global = {}

• app.js 中

App({
  data: 123,
  other: 'hello'
})
console.log(getApp()) // {global: {}, data: 456, other: 'hello'}

作為獨(dú)立分包不依賴主包的情況下，默認(rèn)獨(dú)立分包為傳參方，使用 getApp({allowDefault: true}) 方法后若打開主包，則會更新至 App 中。主包打開后便可以使用 getApp() 獲取數(shù)據(jù)。

（2）關(guān)于 App 生命周期

從獨(dú)立分包啟動小程序時不會觸發(fā)主包中的 App 的onLaunch 和首次 onShow ，直到用戶第一次從獨(dú)立分包的頁面進(jìn)入主包或其他分包頁面的時候才會調(diào)用。

由于獨(dú)立分包中無法定義 App，所以無法使用正常頁面中的 onLoad 或是 onShow 等生命周期。獨(dú)立分包想要實(shí)現(xiàn)小程序生命周期的監(jiān)聽可以使用 wx.onAppShow，wx.onAppHide 完成。App 上的其他事件可以使用 wx.onError，wx.onPageNotFound 監(jiān)聽。

4、低版本兼容

在低于 6.7.2 版本的微信中運(yùn)行時，獨(dú)立分包視為普通分包處理，不具備獨(dú)立運(yùn)行的特性。

??注意：在兼容模式下，主包中的 app.wxss 可能會對獨(dú)立分包中的頁面產(chǎn)生影響，因此應(yīng)避免在獨(dú)立分包頁面中使用 app.wxss 中的樣式。

ase/app/app-event/wx.onPageNotFound.html) 監(jiān)聽。

4、低版本兼容

在低于 6.7.2 版本的微信中運(yùn)行時，獨(dú)立分包視為普通分包處理，不具備獨(dú)立運(yùn)行的特性。

??注意：在兼容模式下，主包中的 app.wxss 可能會對獨(dú)立分包中的頁面產(chǎn)生影響，因此應(yīng)避免在獨(dú)立分包頁面中使用 app.wxss 中的樣式。

簡單來說就是別樣式重名??。

總結(jié) 

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

最新評論