QQ小程序 分包加載

某些情況下，開發(fā)者需要將小程序劃分成不同的子包，在構(gòu)建時打包成不同的分包，用戶在使用時按需進行加載。 在構(gòu)建小程序分包項目時，構(gòu)建會輸出一個或多個分包。每個使用分包小程序必定含有一個主包。所謂的主包，即放置默認啟動頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 腳本；而分包則是根據(jù)開發(fā)者的配置進行劃分。 在小程序啟動時，默認會下載主包并啟動主包內(nèi)頁面，當用戶用戶進入分包內(nèi)某個頁面時，客戶端會把對應分包下載下來，下載完成后再進行展示。 目前小程序分包大小有以下限制：

• 整個小程序所有分包大小不超過 24M
• 單個分包/主包大小不能超過 2M 對小程序進行分包，可以優(yōu)化小程序首次啟動的下載時間，以及在多團隊共同開發(fā)時可以更好的解耦協(xié)作。

使用分包

假設支持分包的小程序目錄結(jié)構(gòu)如下：

├── app.js
├── app.json
├── app.qss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

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

寫成 subPackages 也支持。

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

subpackages 中，每個分包的配置有以下幾項：

打包原則

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

引用原則

• packageA 無法 require packageB JS 文件，但可以 require app、自己 package 內(nèi)的 JS 文件
• packageA 無法 import packageB 的 template，但可以 require app、自己 package 內(nèi)的 template
• packageA 無法使用 packageB 的資源，但可以使用 app、自己 package 內(nèi)的資源

低版本兼容

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

獨立分包

獨立分包是小程序中一種特殊類型的分包，可以獨立于主包和其他分包運行。從獨立分包中頁面進入小程序時，不需要下載主包。當用戶進入普通分包或主包內(nèi)頁面時，主包才會被下載。 開發(fā)者可以按需將某些具有一定功能獨立性的頁面配置到獨立分包中。當小程序從普通的分包頁面啟動時，需要首先下載主包；而獨立分包不依賴主包即可運行，可以很大程度上提升分包頁面的啟動速度。 一個小程序中可以有多個獨立分包。

小游戲不支持獨立分包。

配置方法

假設小程序目錄結(jié)構(gòu)如下：

├── app.js
├── app.json
├── app.qss
├── moduleA
│   └── pages
│       ├── rabbit
│       └── squirrel
├── moduleB
│   └── pages
│       ├── pear
│       └── pineapple
├── pages
│   ├── index
│   └── logs
└── utils

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

{
  "pages": ["pages/index", "pages/logs"],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": ["pages/rabbit", "pages/squirrel"]
    },
    {
      "root": "moduleB",
      "pages": ["pages/pear", "pages/pineapple"],
      "independent": true
    }
  ]
}

限制

獨立分包屬于分包的一種。普通分包的所有限制都對獨立分包有效。獨立分包中插件、自定義組件的處理方式同普通分包。 此外，使用獨立分包時要注意：

• 獨立分包中不能依賴主包和其他分包中的內(nèi)容，包括js文件、template、qss、自定義組件、插件等。主包中的app.qss對獨立分包無效，應避免在獨立分包頁面中使用 app.qss 中的樣式；
• App 只能在主包內(nèi)定義，獨立分包中不能定義 App，會造成無法預期的行為；
• 獨立分包中暫時不支持使用插件。

注意事項

（1）關于 getApp()

與普通分包不同，獨立分包運行時，App 并不一定被注冊，因此 - getApp() 也不一定可以獲得 App 對象：

• 當用戶從獨立分包頁面啟動小程序時，主包不存在，App也不存在，此時調(diào)用 getApp() 獲取到的是 undefined。 當用戶進入普通分包或主包內(nèi)頁面時，主包才會被下載，App 才會被注冊。
• 當用戶是從普通分包或主包內(nèi)頁面跳轉(zhuǎn)到獨立分包頁面時，主包已經(jīng)存在，此時調(diào)用 getApp() 可以獲取到真正的 App。 由于這一限制，開發(fā)者無法通過 App 對象實現(xiàn)獨立分包和小程序其他部分的全局變量共享。 getApp支持 allowDefault參數(shù)，在 App 未定義時返回一個默認實現(xiàn)。當主包加載，App被注冊時，默認實現(xiàn)中定義的屬性會被覆蓋合并到真正的 App 中。

示例代碼： 獨立分包中

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）關于 App 生命周期 當從獨立分包啟動小程序時，主包中 App 的 onLaunch 和首次 onShow 會在從獨立分包頁面首次進入主包或其他普通分包頁面時調(diào)用。 由于獨立分包中無法定義 App，小程序生命周期的監(jiān)聽可以使用 qq.onAppShow，qq.onAppHide 完成。App 上的其他事件可以使用 qq.onError，qq.onPageNotFound 監(jiān)聽。

低版本兼容

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

分包預下載

開發(fā)者可以通過配置，在進入小程序某個頁面時，由框架自動預下載可能需要的分包，提升進入后續(xù)分包頁面時的啟動速度。對于獨立分包，也可以預下載主包。 分包預下載目前只支持通過配置方式使用，暫不支持通過調(diào)用API完成。

vConsole 里有preloadSubpackages開頭的日志信息，可以用來驗證預下載的情況。

配置方法

預下載分包行為在進入某個頁面時觸發(fā)，通過在 app.json 增加 preloadRule 配置來控制。

{
  "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 是頁面路徑，value 是進入此頁面的預下載配置，每個配置有以下幾項：

限制

同一個分包中的頁面享有共同的預下載大小限額 2M，限額會在工具中打包時校驗。 如，頁面 A 和 B 都在同一個分包中，A 中預下載總大小 0.5M 的分包，B中最多只能預下載總大小 1.5M 的分包。