微信小程序分包加載實(shí)戰(zhàn)

"離線包"機(jī)制

微信小程序采用的是類(lèi)似離線包加載方案，以 轉(zhuǎn)轉(zhuǎn) 小程序?yàn)槔?，?dāng)用戶第一次打開(kāi)時(shí)會(huì)先下載好所有代碼，然后再加載頁(yè)面；當(dāng)用戶再次進(jìn)入轉(zhuǎn)轉(zhuǎn)小程序時(shí)，會(huì)直接使用已下載的代碼，省去了代碼下載的過(guò)程，打開(kāi)速度更快。

看似很美好的設(shè)計(jì)，但有兩個(gè)問(wèn)題：

• 第一次打開(kāi)轉(zhuǎn)轉(zhuǎn)小程序時(shí)白屏?xí)r間很長(zhǎng)，因?yàn)橐螺d接近2.5M的代碼量，也就是說(shuō)你的代碼越多，白屏?xí)r間越長(zhǎng)，而轉(zhuǎn)轉(zhuǎn)APP采用的網(wǎng)頁(yè)離線機(jī)制體驗(yàn)更佳：在用戶打開(kāi)APP時(shí)就下載/更新離線包，這樣在用戶進(jìn)入對(duì)應(yīng)的網(wǎng)頁(yè)時(shí)，代碼已經(jīng)下載好了，沒(méi)有漫長(zhǎng)的白屏過(guò)程。

• 代碼有部分更新時(shí)，沒(méi)辦法進(jìn)行增量更新，導(dǎo)致每次發(fā)版后，用戶都需要重新下載全部代碼

問(wèn)題看似不大，但對(duì)轉(zhuǎn)轉(zhuǎn)有很大影響，例如進(jìn)行微信廣告投放時(shí)，用戶從點(diǎn)擊廣告到加載第一個(gè)頁(yè)面之間的流失率竟能到達(dá)40%，這顯然是FE無(wú)法接受的性能，而小程序分包加載機(jī)制能夠在一定程度上解決上述問(wèn)題。

分包加載

小程序的分包加載機(jī)制實(shí)際上是離線包和M頁(yè)的一種結(jié)合機(jī)制，即你可以把代碼劃分成主包+N個(gè)分包，官方定義：

在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁(yè)面，如果用戶需要打開(kāi)分包內(nèi)某個(gè)頁(yè)面，客戶端會(huì)把對(duì)應(yīng)分包下載下來(lái)，下載完成后再進(jìn)行展示。

總結(jié)如下：

• 打開(kāi)小程序，默認(rèn)先加載主包

• 進(jìn)入分包頁(yè)面時(shí)，再加載對(duì)應(yīng)分包

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