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

"離線包"機制

微信小程序采用的是類似離線包加載方案，以 轉轉 小程序為例，當用戶第一次打開時會先下載好所有代碼，然后再加載頁面；當用戶再次進入轉轉小程序時，會直接使用已下載的代碼，省去了代碼下載的過程，打開速度更快。

看似很美好的設計，但有兩個問題：

• 第一次打開轉轉小程序時白屏時間很長，因為要下載接近2.5M的代碼量，也就是說你的代碼越多，白屏時間越長，而轉轉APP采用的網頁離線機制體驗更佳：在用戶打開APP時就下載/更新離線包，這樣在用戶進入對應的網頁時，代碼已經下載好了，沒有漫長的白屏過程。

• 代碼有部分更新時，沒辦法進行增量更新，導致每次發(fā)版后，用戶都需要重新下載全部代碼

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

分包加載

小程序的分包加載機制實際上是離線包和M頁的一種結合機制，即你可以把代碼劃分成主包+N個分包，官方定義：

在小程序啟動時，默認會下載主包并啟動主包內頁面，如果用戶需要打開分包內某個頁面，客戶端會把對應分包下載下來，下載完成后再進行展示。

總結如下：

• 打開小程序，默認先加載主包

• 進入分包頁面時，再加載對應分包

這樣的好處是進入主包頁面時，需要下載的代碼量小了很多，白屏時間更短，體驗更佳。