這篇文章主要介紹小程序怎么使用分包加載，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供卡若網(wǎng)站建設(shè)、卡若做網(wǎng)站、卡若網(wǎng)站設(shè)計(jì)、卡若網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、卡若企業(yè)網(wǎng)站模板建站服務(wù)，十多年卡若做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
"離線包"機(jī)制
微信小程序采用的是類似離線包加載方案，以轉(zhuǎn)轉(zhuǎn)小程序?yàn)槔?dāng)用戶第一次打開時(shí)會(huì)先下載好所有代碼，然后再加載頁面；當(dāng)用戶再次進(jìn)入轉(zhuǎn)轉(zhuǎn)小程序時(shí)，會(huì)直接使用已下載的代碼，省去了代碼下載的過程，打開速度更快。
看似很美好的設(shè)計(jì)，但有兩個(gè)問題：
第一次打開轉(zhuǎn)轉(zhuǎn)小程序時(shí)白屏?xí)r間很長，因?yàn)橐螺d接近2.5M的代碼量，也就是說你的代碼越多，白屏?xí)r間越長，而轉(zhuǎn)轉(zhuǎn)APP采用的網(wǎng)頁離線機(jī)制體驗(yàn)更佳：在用戶打開APP時(shí)就下載/更新離線包，這樣在用戶進(jìn)入對(duì)應(yīng)的網(wǎng)頁時(shí)，代碼已經(jīng)下載好了，沒有漫長的白屏過程。
代碼有部分更新時(shí)，沒辦法進(jìn)行增量更新，導(dǎo)致每次發(fā)版后，用戶都需要重新下載全部代碼
問題看似不大，但對(duì)轉(zhuǎn)轉(zhuǎn)有很大影響，例如進(jìn)行微信廣告投放時(shí)，用戶從點(diǎn)擊廣告到加載第一個(gè)頁面之間的流失率竟能到達(dá)40%，這顯然是FE無法接受的性能，而小程序分包加載機(jī)制能夠在一定程度上解決上述問題。
分包加載
小程序的分包加載機(jī)制實(shí)際上是離線包和M頁的一種結(jié)合機(jī)制，即你可以把代碼劃分成主包+N個(gè)分包，官方定義：
在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁面，如果用戶需要打開分包內(nèi)某個(gè)頁面，客戶端會(huì)把對(duì)應(yīng)分包下載下來，下載完成后再進(jìn)行展示。
總結(jié)如下：
打開小程序，默認(rèn)先加載主包
進(jìn)入分包頁面時(shí)，再加載對(duì)應(yīng)分包
特性
1.7.3 及以上基礎(chǔ)庫開始支持，不支持的版本默認(rèn)使用整包的方式
整個(gè)小程序所有分包大小不超過 4M，單個(gè)分包/主包大小不能超過 2M
分包數(shù)量目前沒有限制，也就是說你可以放N個(gè)分包，甚至每個(gè)頁面一個(gè)分包
入口頁面/TAB頁面必須在主包里
關(guān)于主包
第一次進(jìn)入小程序，默認(rèn)下載主包代碼
分包以外的所有代碼，都會(huì)被打入主包
分包內(nèi)代碼可以引用主包內(nèi)代碼
關(guān)于分包
因?yàn)榇嬖谫Y源依賴關(guān)系，微信的機(jī)制是先下載主包，后下載分包
分包目錄不能在主包目錄下面
分包可以引用自己包內(nèi)、主包內(nèi)的資源，不能引用其他分包內(nèi)的資源
這樣的好處是進(jìn)入主包頁面時(shí)，需要下載的代碼量小了很多，白屏?xí)r間更短，體驗(yàn)更佳。
在小程序開發(fā)的過程中，小程序的體積會(huì)隨著版本的迭代變的越來越大，這時(shí)候我們就希望能夠?qū)⑿〕绦蚍殖啥鄠€(gè)包從服務(wù)器下載，這樣既可以加快首屏的渲染也便于后續(xù)按需加載的實(shí)現(xiàn)。小程序在微信客戶端 6.6.0，基礎(chǔ)庫 1.7.3 及以上版本開始支持 分包功能。
在構(gòu)建小程序分包項(xiàng)目時(shí)，構(gòu)建會(huì)輸出一個(gè)或多個(gè)分包。每個(gè)使用分包小程序必定含有一個(gè)主包。所謂的主包，即放置默認(rèn)啟動(dòng)頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 腳本；而分包則是根據(jù)開發(fā)者的配置進(jìn)行劃分。
在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁面，當(dāng)用戶進(jìn)入分包內(nèi)某個(gè)頁面時(shí)，客戶端會(huì)把對(duì)應(yīng)分包下載下來，下載完成后再進(jìn)行展示。
配置方法
配置例子
重慶分公司
重慶分公司
{
"pages": ["pages/index", "pages/shopcart"],
"subpackages": [
{
"root": "packageA",
"pages": ["pages/mine", "pages/order"]
},
{
"root": "packageB",
"name": "pack2",
"pages": ["pages/detail", "pages/pay"]
}
]
}├── app.js ├── app.json ├── app.wxss ├── packageA │ └── pages │ ├── mine │ └── order ├── packageB │ └── pages │ ├── pay │ └── detail ├── pages │ ├── index │ └── shopcart └── utils
打包原則
聲明 subpackages 后，將按 subpackages 配置路徑進(jìn)行打包，subpackages 配置路徑外的目錄將被打包到 app（主包） 中
app（主包）也可以有自己的 pages（即最外層的 pages 字段）
subpackage 的根目錄不能是另外一個(gè) 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)的資源
以上是“小程序怎么使用分包加載”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
