轉(zhuǎn)轉(zhuǎn)小程序分包加載實(shí)例

微信小程序采用的是類似離線包加載方案，以 轉(zhuǎn)轉(zhuǎ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)分包

這樣的好處是進(jìn)入主包頁面時(shí)，需要下載的代碼量小了很多，白屏?xí)r間更短，體驗(yàn)更佳。

特性

• 1.7.3 及以上基礎(chǔ)庫開始支持，不支持的版本默認(rèn)使用整包的方式
• 整個(gè)小程序所有分包大小不超過 4M，單個(gè)分包/主包大小不能超過 2M
• 分包數(shù)量目前沒有限制，也就是說你可以放 N 個(gè)分包，甚至每個(gè)頁面一個(gè)分包
• 入口頁面 / Tab 頁面必須在主包里

• 第一次進(jìn)入小程序，默認(rèn)下載主包代碼
• 分包以外的所有代碼，都會(huì)被打入主包
• 分包內(nèi)代碼可以引用主包內(nèi)代碼

關(guān)于分包

• 因?yàn)榇嬖谫Y源依賴關(guān)系，微信的機(jī)制是先下載主包，后下載分包
• 分包目錄不能在主包目錄下面
• 分包可以引用自己包內(nèi)、主包內(nèi)的資源，不能引用其他分包內(nèi)的資源

坑

• 小程序的打包機(jī)制僅僅是根據(jù)文件目錄打包，分包內(nèi)require/import的任何文件，只要不在同一個(gè)目錄下面，都不會(huì)被打進(jìn)分包，也就是說，類庫及一些公共文件，只能放在主包里面，如果主包分包劃分不好的話，主包的大小也很難降下來
• 安卓系統(tǒng)進(jìn)入分包頁面時(shí)，會(huì)出現(xiàn)一個(gè)丑陋的系統(tǒng)級(jí)的loading層，這一定程度上影響了安卓的體驗(yàn)

轉(zhuǎn)轉(zhuǎn)的分包加載

轉(zhuǎn)轉(zhuǎn)小程序在使用分包之前，壓縮后的代碼量大概是2.45M，也就是說，每個(gè)新用戶第一次都需要下載的2.45M代碼才能進(jìn)入頁面，使用分包機(jī)制后，主包大小降為1M左右，也就是說，如果是進(jìn)入主包頁面， 下載時(shí)間大約降低了60%

文件結(jié)構(gòu)：

├── libs
├── components
├── pages  主包根目錄
├────index 首頁
├────post  發(fā)布頁
├────...
├── subPages  分包根目錄
├────trade    交易分包
├────mine     我的頁面分包
├────...
復(fù)制代碼

我們根據(jù)用戶訪問的軌跡，分成了 20 個(gè)左右的分包。 例如 trade 包，里面包含詳情頁、下單頁、支付頁、支付成功頁等，這條線的頁面，用戶可能不需要一進(jìn)入小程序就使用，但一旦使用可能是使用整個(gè)鏈條，因此可以作為一個(gè)分包。

歷史入口兼容

一個(gè)頁面放入分包之后，路徑會(huì)發(fā)生變化，例如詳情頁由 /pages/detail 變?yōu)?/subPages/trade/detail，意味著如果用戶訪問了以前的 page 則得不到正確的頁面響應(yīng)（例如：分享出去的小程序卡片、二維碼、公眾號(hào)推送消息等），這些靜態(tài)不可改變的歷史入口怎么辦？我們目前采用如下方案：

原來主包內(nèi)的每個(gè)頁面都保留，但代碼只保留跳轉(zhuǎn)邏輯，用戶進(jìn)來后立即跳到對(duì)應(yīng)的分包頁面，用戶幾乎是無感知的

這樣也會(huì)產(chǎn)生一點(diǎn)小問題：這些跳轉(zhuǎn)頁面也占用一定的空間，接下來我們會(huì)優(yōu)化成在 onLaunch、頁面跳轉(zhuǎn)時(shí)進(jìn)行判斷，直接跳入正確的分包頁面。

以上是轉(zhuǎn)轉(zhuǎn)在分包加載方面的實(shí)戰(zhàn)記錄，更多小程序開發(fā)內(nèi)容，請(qǐng)查看本網(wǎng)站，謝謝。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看：小程序商店