此文較為詳細(xì)的介紹了分包的使用包括獨(dú)立分包，以及一些注意事項(xiàng)，希望大家能夠耐心的看下去

背景介紹

微信限制了代碼包不能超過(guò) 2MB踏拜，限制大小是出于對(duì)小程序啟動(dòng)速度的考慮，希望用戶在使用任何一款小程序時(shí)低剔，都能獲得一種“秒開(kāi)”體驗(yàn)速梗。然而肮塞，2MB 的大小也限制了小程序功能的擴(kuò)展，小程序業(yè)務(wù)的發(fā)展可能需要更大的體積姻锁。那么有沒(méi)有一種辦法枕赵，在增加小程序包的同時(shí)，也能保持不錯(cuò)的體驗(yàn)速度呢位隶？

為了解決這個(gè)矛盾點(diǎn)设易，微信推出了“分包加載方案”

原理介紹

在小程序啟動(dòng)時(shí)揩环，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁(yè)面，如果用戶需要打開(kāi)分包內(nèi)某個(gè)頁(yè)面，客戶端會(huì)把對(duì)應(yīng)分包下載下來(lái)托享，下載完成后再進(jìn)行展示。

分包類型

普通分包與獨(dú)立分包呀舔。獨(dú)立分包是小程序中一種特殊類型的分包场斑，可以獨(dú)立于主包和其他分包運(yùn)行。從獨(dú)立分包中頁(yè)面進(jìn)入小程序時(shí)挽鞠，不需要下載主包疚颊。當(dāng)用戶進(jìn)入普通分包或主包內(nèi)頁(yè)面時(shí)，主包才會(huì)被下載信认。一個(gè)小程序中可以有多個(gè)獨(dú)立分包材义。

小游戲不支持獨(dú)立分包

使用分包

配置方法:假設(shè)支持分包的小程序目錄結(jié)構(gòu)如下：

├── app.js
├── app.json
├── app.wxss
├── moduleA
│   └── pages
│       ├── rabbit
│       └── squirrel
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

開(kāi)發(fā)者通過(guò)在 app.json subpackages字段聲明項(xiàng)目分包結(jié)構(gòu)：

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

注：其中moduleA為獨(dú)立分包 (independent字段聲明對(duì)應(yīng)分包為獨(dú)立分包)

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

• 獨(dú)立分包中不能依賴主包和其他分包中的內(nèi)容，包括js文件潦蝇、template款熬、wxss、自定義組件攘乒、插件等贤牛。主包中的app.wxss對(duì)獨(dú)立分包無(wú)效，應(yīng)避免在獨(dú)立分包頁(yè)面中使用 app.wxss 中的樣式则酝；
• App 只能在主包內(nèi)定義殉簸，獨(dú)立分包中不能定義 App，會(huì)造成無(wú)法預(yù)期的行為沽讹；
• 獨(dú)立分包中暫時(shí)不支持使用插件般卑。

注意事項(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监氢。

   由于這一限制，開(kāi)發(fā)者無(wú)法通過(guò)App對(duì)象實(shí)現(xiàn)獨(dú)立分包和小程序其他部分的全局變量共享藤违。
   為了在獨(dú)立分包中滿足這一需求浪腐，基礎(chǔ)庫(kù) 2.2.4 版本開(kāi)始 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'}

2. 關(guān)于 App 生命周期
   當(dāng)從獨(dú)立分包啟動(dòng)小程序時(shí)特漩，主包中 App 的 onLaunch 和首次 onShow 會(huì)在從獨(dú)立分包頁(yè)面首次進(jìn)入主包或其他普通分包頁(yè)面時(shí)調(diào)用。

   由于獨(dú)立分包中無(wú)法定義 App骨杂，小程序生命周期的監(jiān)聽(tīng)可以使用 wx.onAppShow涂身，wx.onAppHide 完成。App 上的其他事件可以使用 wx.onError搓蚪，wx.onPageNotFound 監(jiān)聽(tīng)蛤售。

分包預(yù)下載

開(kāi)發(fā)者可以通過(guò)配置，在進(jìn)入小程序某個(gè)頁(yè)面時(shí)妒潭，由框架自動(dòng)預(yù)下載可能需要的分包悴能，提升進(jìn)入后續(xù)分包頁(yè)面時(shí)的啟動(dòng)速度。對(duì)于獨(dú)立分包雳灾，也可以預(yù)下載主包
配置方法：
預(yù)下載分包行為在進(jìn)入某個(gè)頁(yè)面時(shí)觸發(fā)漠酿，通過(guò)在 app.json 增加 preloadRule 配置來(lái)控制。

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

preloadRule 中佑女，key 是頁(yè)面路徑记靡，value 是進(jìn)入此頁(yè)面的預(yù)下載配置，每個(gè)配置有以下幾項(xiàng)：

適用版本

微信客戶端 6.6.0嚎花，基礎(chǔ)庫(kù) 1.7.3 及以上版本開(kāi)始支持。開(kāi)發(fā)者工具請(qǐng)使用 1.01.1712150 及以上版本

分包限制

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

分包好處

1. 對(duì)小程序進(jìn)行分包呀洲，可以優(yōu)化小程序的首次啟動(dòng)的下載時(shí)間
2. 在多團(tuán)隊(duì)共同開(kāi)發(fā)的時(shí)候可以更好的解耦操作

打包原則

• 聲明 subpackages 后紊选，將按 subpackages 配置路徑進(jìn)行打包啼止，subpackages 配置路徑外的目錄將被打包到 app（主包） 中
• app（主包）也可以有自己的 pages（即最外層的 pages 字段）
• subpackage 的根目錄不能是另外一個(gè) subpackage 內(nèi)的子目錄
• tabBar 頁(yè)面必須在 app（主包）內(nèi)

引用原則

• packageA 無(wú)法 require packageB JS 文件，但可以 require app兵罢、自己 package 內(nèi)的 JS 文件
• packageA 無(wú)法 import packageB 的 template献烦，但可以 require app、自己 package 內(nèi)的 template
• packageA 無(wú)法使用 packageB 的資源卖词，但可以使用 app巩那、自己 package 內(nèi)的資源

參考文章

• https://m.imooc.com/wenda/detail/397260
• 官方API