小程序模板網(wǎng)

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

發(fā)布時(shí)間:2018-06-04 12:14 所屬欄目:小程序開(kāi)發(fā)教程

"離線包"機(jī)制

微信小程序采用的是類似離線包加載方案,以 轉(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)更佳。

特性

  • 1.7.3 及以上基礎(chǔ)庫(kù)開(kāi)始支持,不支持的版本默認(rèn)使用整包的方式

  • 整個(gè)小程序所有分包大小不超過(guò) 4M,單個(gè)分包/主包大小不能超過(guò) 2M

  • 分包數(shù)量目前沒(méi)有限制,也就是說(shuō)你可以放N個(gè)分包,甚至每個(gè)頁(yè)面一個(gè)分包

  • 入口頁(yè)面/TAB頁(yè)面必須在主包里

關(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ī)制僅僅是根據(jù)文件目錄打包,分包內(nèi)require/import的任何文件,只要不在同一個(gè)目錄下面,都不會(huì)被打進(jìn)分包,也就是說(shuō),類庫(kù)及一些公共文件,只能放在主包里面,如果主包分包劃分不好的話,主包的大小也很難降下來(lái)

  • 安卓系統(tǒng)進(jìn)入分包頁(yè)面時(shí),會(huì)出現(xiàn)一個(gè)丑陋的系統(tǒng)級(jí)的loading層,這一定程度上影響了安卓的體驗(yàn)

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

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

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

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

歷史入口兼容

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

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

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


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24497.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢