我們在開發(fā)小程序之初，肯定先要了解小程序開發(fā)的種種限制。相信童鞋一定會為官方的小程序包大小不得超過2M這一限制而頭疼不已，好不容易爬坑出來，到了提交發(fā)布代碼這關(guān)鍵一步，卻因為代碼體積超限迫使含辛茹苦擼出的小程序胎死腹中...啊，多么痛的領(lǐng)悟~
還好，官方推出了小程序分包加載這一功能：
2018年6月15日周五23點(diǎn)43分，小程序發(fā)布官方公告：小程序分包加載功能升級，新增性能監(jiān)控，意味著小程序的代碼包總上限可提升至8M，但是分包的大小還是不超過2M。即可以使用1個主包，3個分包的方式達(dá)到8M的總的代碼包大小。
這對于廣大開發(fā)者來說無疑是重大喜訊，廢話不多說，動手之前建議認(rèn)真閱讀官方文檔，以避免不必要的“趟坑之旅”，現(xiàn)羅列以下幾點(diǎn)與諸位共勉：
環(huán)境要求
微信 6.6 客戶端，1.7.3 及以上基礎(chǔ)庫開始支持，請更新至最新客戶端版本，開發(fā)者工具請使用 1.01.1712150 及以上版本，可點(diǎn)此下載
如何分包
在構(gòu)建小程序分包項目時，構(gòu)建會輸出一個或多個功能的分包，其中每個分包小程序必定含有一個主包，所謂的主包，即放置默認(rèn)啟動頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 腳本，而分包則是根據(jù)開發(fā)者的配置進(jìn)行劃分。
目前小程序分包大小有以下限制：
整個小程序所有分包大小不超過 8M 單個分包/主包大小不能超過 2M
在小程序啟動時，默認(rèn)會下載主包并啟動主包內(nèi)頁面，如果用戶需要打開分包內(nèi)某個頁面，客戶端會把對應(yīng)分包下載下來，下載完成后再進(jìn)行展示。對小程序進(jìn)行分包，可以優(yōu)化小程序首次啟動的下載時間，以及在多團(tuán)隊共同開發(fā)時可以更好的解耦協(xié)作。
使用方法
假設(shè)支持分包的小程序目錄結(jié)構(gòu)如下：
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
開發(fā)者通過在 app.json subPackages 字段聲明項目分包結(jié)構(gòu)：
{
"pages":[
"pages/index",
"pages/logs"
],
"subPackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
打包原則
- 聲明 subPackages 后，將按 subPackages 配置路徑進(jìn)行打包，subPackages 配置路徑外的目錄將被打包到 app（主包） 中
- app（主包）也可以有自己的 pages（即最外層的 pages 字段）
- subPackage 的根目錄不能是另外一個 subPackage 內(nèi)的子目錄
- 首頁的 TAB 頁面必須在 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)的資源
低版本兼容
由微信后臺編譯來處理舊版本客戶端的兼容，后臺會編譯兩份代碼包，一份是分包后代碼，另外一份是整包的兼容代碼。 新客戶端用分包，老客戶端還是用的整包，完整包會把各個 subpackage 里面的路徑放到 pages 中。
有坑請繞行
網(wǎng)上找資源的時候發(fā)現(xiàn)一篇博客寫轉(zhuǎn)轉(zhuǎn)小程序?qū)崙?zhàn)分包加載的，其中有提到歷史入口兼容的問題：
一個頁面放入分包之后，路徑會發(fā)生變化，例如詳情頁由/pages/detail變?yōu)?subPages/trade/detail，意味著如果用戶訪問了以前的page則得不到正確的頁面響應(yīng)（例如：分享出去的小程序卡片、二維碼、公眾號推送消息等），這些靜態(tài)不可改變的歷史入口怎么辦？我們目前采用如下方案：
原來主包內(nèi)的每個頁面都保留，但代碼只保留跳轉(zhuǎn)邏輯，用戶進(jìn)來后立即跳到對應(yīng)的分包頁面，用戶幾乎是無感知的。這樣也會產(chǎn)生一點(diǎn)小問題：這些跳轉(zhuǎn)頁面也占用一定的空間，接下來我們會優(yōu)化成在onLaunch、頁面跳轉(zhuǎn)時進(jìn)行判斷，直接跳入正確的分包頁面。
使用過程
完整示例代碼請瀏覽： wechat-package
一個主包放不下的圖片（超過2M），可以放在分包下，實(shí)現(xiàn)代碼總限超過2M，但分包大小不超過2M。
我的app.json的內(nèi)容如下：
{
"pages": [
"pages/index/index",
"pages/loading/loading",
"pages/logs/logs",
"pages/plugin/plugin"
],
"subPackages": [
{
"root": "package1",
"pages": [
"pages/home/home"
]
},
{
"root": "package2",
"pages": [
"pages/home/home"
]
},
{
"root": "package3",
"pages": [
"pages/home/home"
]
},
{
"root": "packageIndependent",
"pages": [
"pages/home/home"
],
"independent": true
}
],
"preloadRule": {
"packageIndependent/pages/home/home": {
"network": "all",
"packages": ["packageIndependent"]
}
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "學(xué)習(xí)分包加載",
"navigationBarTextStyle": "black"
},
"plugins": {
"tencentvideo": {
"version": "1.2.5",
"provider": "wxa75efa648b60994b"
},
"txmap": {
"version": "1.0.6",
"provider": "wx5bc2ac602a747594"
}
}
}
分包加載流程
一般情況下，小程序的代碼將打包在一起，在小程序啟動時一次性下載完成。采用分包時，小程序的代碼包可以被劃分為幾個：一個是“主包”，包含小程序啟動時會馬上打開的頁面代碼和相關(guān)資源；其余是“分包”，包含其余的代碼和資源。這樣，小程序啟動時，只需要先將主包下載完成，就可以立刻啟動小程序。這樣就可以顯著降低小程序代碼包的下載時間。
更多可參考小程序開發(fā)指南
如上圖所示，我這里的幾個分包package1、package2、package3，每個分包下都可以有自己的頁面代碼和資源文件，而除掉分包目錄部分就是小程序的主包。在小程序啟動時分包的目錄不會馬上被下載下來，只有主包的內(nèi)容才會被下載。利用這個特性就可以顯著降低初始啟動時的下載時間。
在構(gòu)建小程序分包項目時，構(gòu)建會輸出一個或多個功能的分包，其中每個分包小程序必定含有一個主包，所謂的主包，即放置默認(rèn)啟動頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 腳本，而分包則是根據(jù)開發(fā)者的配置進(jìn)行劃分。
在小程序啟動時，默認(rèn)會下載主包并啟動主包內(nèi)頁面，如果用戶需要打開分包內(nèi)某個頁面，客戶端會把對應(yīng)分包下載下來，下載完成后再進(jìn)行展示。
目前小程序分包大小有以下限制：
整個小程序所有分包大小不超過 8M
單個分包/主包大小不能超過 2M
使用如下：
"subPackages": [
{
"root": "package1",
"pages": [
"pages/home/home"
]
},
{
"root": "package2",
"pages": [
"pages/home/home"
]
},
{
"root": "package3",
"pages": [
"pages/home/home"
]
},
{
"root": "packageIndependent",
"pages": [
"pages/home/home"
],
"independent": true
}
],
打包原則
聲明 subPackages 后，將按 subPackages 配置路徑進(jìn)行打包，subPackages 配置路徑外的目錄將被打包到 app（主包） 中。
app（主包）也可以有自己的 pages（即最外層的 pages 字段）。
subPackage 的根目錄不能是另外一個 subPackage 內(nèi)的子目錄。
首頁的 TAB 頁面必須在 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)的資源。
注意：
- 不管分包如何處理，跳轉(zhuǎn)路徑和之前一樣正常跳轉(zhuǎn)，一點(diǎn)都沒變；加載分包時會有彈窗提示。
- 如果分包的首頁在TAB中，則文件必須不能放在分包的目錄下；
- 盡管做了分包處理，項目的素材，公共文件等若放在最外層依然會被分在主包中?？蓪D片等放在分包的目錄下。
參考文檔：小程序官方開發(fā)文檔-分包加載
