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

一、為什么要使用分包？

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

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

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

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

• 整個(gè)小程序所有分包大小不超過 20M
• 單個(gè)分包/主包大小不能超過 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ù)說(shuō)明：

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

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

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

2、demo 案例分析

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

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

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

3、打包原則

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

4、引用原則

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

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

5、低版本兼容

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

三、獨(dú)立分包

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

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

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

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

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

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

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

2、限制

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

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

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

3、注意事項(xiàng)

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

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

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

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

為了在獨(dú)立分包中滿足這一需求，基礎(chǔ)庫(kù) 2.2.4 版本開始 getApp 支持 [allowDefault] 參數(shù)，在 App 未定義時(shí)返回一個(gè)默認(rèn)實(shí)現(xiàn)。當(dāng)主包加載，App 被注冊(cè)時(shí)，默認(rèn)實(shí)現(xiàn)中定義的屬性會(huì)被覆蓋合并到真正的 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}) 方法后若打開主包，則會(huì)更新至 App 中。主包打開后便可以使用 getApp() 獲取數(shù)據(jù)。

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

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

由于獨(dú)立分包中無(wú)法定義 App，所以無(wú)法使用正常頁(yè)面中的 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)行時(shí)，獨(dú)立分包視為普通分包處理，不具備獨(dú)立運(yùn)行的特性。

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

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

4、低版本兼容

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

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

簡(jiǎn)單來(lái)說(shuō)就是別樣式重名??。

總結(jié) 

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

最新評(píng)論