分包加載

微信客戶端 6.6.0，基礎庫?1.7.3?及以上版本開始支持。開發者工具請使用 1.01.1712150 及以上版本，可點此下載。

某些情況下，開發者需要將小程序劃分成不同的子包，在構建時打包成不同的分包，用戶在使用時按需進行加載。

在構建小程序分包項目時，構建會輸出一個或多個分包。每個使用分包小程序必定含有一個主包。所謂的主包，即放置默認啟動頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 腳本；而分包則是根據開發者的配置進行劃分。

在小程序啟動時，默認會下載主包并啟動主包內頁面，當用戶用戶進入分包內某個頁面時，客戶端會把對應分包下載下來，下載完成后再進行展示。

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

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

對小程序進行分包，可以優化小程序首次啟動的下載時間，以及在多團隊共同開發時可以更好的解耦協作。

使用分包

配置方法

假設支持分包的小程序目錄結構如下：

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

開發者通過在 app.json?subPackages?字段聲明項目分包結構：

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

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

字段	類型	說明
root	String	分包根目錄
name	String	分包別名，分包預下載時可以使用
pages	StringArray	分包頁面路徑，相對與分包根目錄
independent	Boolean	分包是否是獨立分包

打包原則

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

引用原則

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

低版本兼容

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

示例項目

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

獨立分包

微信客戶端 6.7.2，基礎庫?2.3.0?及以上版本開始支持。開發者工具請使用 1.02.1808300 及以上版本，可點此下載。

獨立分包是小程序中一種特殊類型的分包，可以獨立于主包和其他分包運行。從獨立分包中頁面進入小程序時，不需要下載主包。當用戶進入普通分包或主包內頁面時，主包才會被下載。

開發者可以按需將某些具有一定功能獨立性的頁面配置到獨立分包中。當小程序從普通的分包頁面啟動時，需要首先下載主包；而獨立分包不依賴主包即可運行，可以很大程度上提升分包頁面的啟動速度。

一個小程序中可以有多個獨立分包。

小游戲不支持獨立分包。

配置方法

假設小程序目錄結構如下：

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

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

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

限制

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

此外，使用獨立分包時要注意：

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

注意事項

（1）關于?getApp()

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

• 當用戶從獨立分包頁面啟動小程序時，主包不存在，App也不存在，此時調用?getApp()?獲取到的是?undefined。 當用戶進入普通分包或主包內頁面時，主包才會被下載，App?才會被注冊。
• 當用戶是從普通分包或主包內頁面跳轉到獨立分包頁面時，主包已經存在，此時調用?getApp()?可以獲取到真正的?App。

由于這一限制，開發者無法通過?App?對象實現獨立分包和小程序其他部分的全局變量共享。

為了在獨立分包中滿足這一需求，基礎庫?2.2.4?版本開始?getApp支持?allowDefault參數，在?App?未定義時返回一個默認實現。當主包加載，App被注冊時，默認實現中定義的屬性會被覆蓋合并到真正的?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?會在從獨立分包頁面首次進入主包或其他普通分包頁面時調用。

低版本兼容

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

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

分包預下載

基礎庫 2.3.0 開始支持，低版本需做兼容處理。 開發者工具請使用 1.02.1808300 及以上版本，可點此下載。

開發者可以通過配置，在進入小程序某個頁面時，由框架自動預下載可能需要的分包，提升進入后續分包頁面時的啟動速度。對于獨立分包，也可以預下載主包。

分包預下載目前只支持通過配置方式使用，暫不支持通過調用API完成。

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

配置方法

預下載分包行為在進入某個頁面時觸發，通過在?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?是進入此頁面的預下載配置，每個配置有以下幾項：

字段	類型	必填	默認值	說明
packages	StringArray	是	無	進入頁面后預下載分包的?root?或?name。__APP__?表示主包。
network	String	否	wifi	在指定網絡下預下載，可選值為： all: 不限網絡? wifi: 僅wifi下預下載

限制

同一個分包中的頁面享有共同的預下載大小限額 2M，限額會在工具中打包時校驗。

如，頁面 A 和 B 都在同一個分包中，A 中預下載總大小 0.5M 的分包，B中最多只能預下載總大小 1.5M 的分包。

轉載于:https://www.cnblogs.com/zmdComeOn/p/9686114.html

總結

以上是生活随笔為你收集整理的小程序--分包加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。