支付寶小程序框架 分包加載

版本要求：基礎(chǔ)庫 1.14.0 或更高版本；支付寶客戶端 10.1.60 或更高版本，若版本較低，建議做 兼容處理；小程序開發(fā)者工具 0.40 或更高版本。

為了滿足日益復(fù)雜的小程序業(yè)務(wù)需求，同時(shí)提升首次打開速度，支付寶小程序從客戶端 10.1.60 版本開始支持分包加載功能。

開發(fā)者可以按需將小程序劃分為若干個(gè)不同的子包。小程序使用分包功能時(shí)，會(huì)默認(rèn)有一個(gè)主包，啟動(dòng)頁面和 tabBar 所有頁面都放在主包中，同時(shí)包含了小程序所需的公共資源（例如 js 腳本等）。在服務(wù)端構(gòu)建時(shí)，會(huì)根據(jù)開發(fā)者的配置，打成不同的分包，用戶在使用小程序進(jìn)入對(duì)應(yīng)分包的頁面時(shí)，客戶端會(huì)下載該分包，并進(jìn)行解析和渲染。

使用建議

• 對(duì)體積較大的小程序項(xiàng)目，建議使用此功能。
• 主包只保留最常用的核心頁面（首頁、tabBar 頁面和其他公共資源），將小程序中不經(jīng)常使用的頁面放到多個(gè)分包中，啟動(dòng)時(shí)只加載主包，使用時(shí)按需下載分包，不要一次性下載整個(gè)代碼包，以提升首頁啟動(dòng)速度。
• 對(duì)于經(jīng)常會(huì)訪問到的待跳轉(zhuǎn)頁面，盡可能將該頁面所在的分包配置成分包預(yù)下載，以提升頁面跳轉(zhuǎn)速度。
• 如果小程序由不同的團(tuán)隊(duì)協(xié)作開發(fā)，建議使用此功能。

使用方法

配置方法

典型的分包小程序目錄如下：

├── app.acss
├── app.js
├── app.json
├── packageA
│   └── pages
│       ├── page1
│       └── page2
├── packageB
│   └── pages
│       ├── page3
│       └── page4
└── pages
    ├── common
    └── index

開發(fā)者在 app.json 文件的 subPackages 字段中聲明小程序的分包結(jié)構(gòu)：

{
  "pages": [
    "pages/index",
    "pages/common"
  ],
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/page1",
        "pages/page2"
      ]
    },
    {
      "root": "packageB",
      "pages": [
        "pages/page3",
        "pages/page4"
      ]
    }
  ]
}

subPackages 字段的配置說明如下：

打包與引用原則

• 開發(fā)者配置 subPackages 后，服務(wù)端將按 subPackages 配置的路徑進(jìn)行打包，subPackages 配置路徑外的目錄將被默認(rèn)打包到主包中。
• 啟動(dòng)頁面和 tabBar 的所有頁面都必須放在主包中。
• 每個(gè)分包的根目錄不能是另外一個(gè)分包內(nèi)的子目錄。
• 分包之間不能相互引用對(duì)方包中的資源（比如圖片和 js 腳本等），分包可以引用主包和自己包內(nèi)的資源。
• 分包和主包是分別獨(dú)立打包的，同一個(gè)js模塊會(huì)在主包和分包中分別存在。

分包大小限制

• 整個(gè)小程序所有分包大小不超過 8MB。
• 單個(gè)分包或主包大小不能超過 2MB。

低版本兼容

支付寶服務(wù)端構(gòu)建平臺(tái)負(fù)責(zé)處理低版本客戶端的兼容，服務(wù)端會(huì)編譯并打包成兩份源碼包，一份是分包后的代碼包，另一份是整包的兼容代碼包。支持分包的新客戶端使用分包，不支持分包的低版本客戶端使用整包。

分包預(yù)下載

開發(fā)者可以通過在 app.json 里的 preloadRule 字段進(jìn)行配置，在進(jìn)入小程序某個(gè)頁面時(shí)，由框架自動(dòng)下載可能需要的分包，以提升分包頁面的啟動(dòng)速度。

一個(gè)典型的分包預(yù)加載配置如下：

{
  "pages": ["pages/index"],
  "subPackages": [
    {
      "root": "sub1",
      "pages": ["page1"]
    },
    {
      "root": "sub2",
      "pages": ["page2"]
    },
    {
      "root": "sub3",
      "pages": ["page3"]
    },
    {
      "root": "path/sub4",
      "pages": ["page4"]
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["sub1"]
    },
    "sub1/page1": {
      "packages": ["sub2", "sub3"]
    },
    "sub3/page3": {
      "network": "wifi",
      "packages": ["path/sub4"]
    }
  }
}

preloadRule 字段中，key 是頁面路徑，value 是進(jìn)入此頁面后預(yù)下載的配置，每個(gè)配置的選項(xiàng)說明如下：

常見問題

Q：小程序超過大小限制，應(yīng)該分包還是減少模塊？

A：小程序最大限制是 2M，如果超過了可以進(jìn)行代碼優(yōu)化，把一些圖片放到服務(wù)器中來減小包的大小。如果實(shí)在沒法控制，可以使用小程序分包。