轉轉：微信小程序分包加載實戰

「離線包」機制

微信小程序採用的是相似離線包加載方案，以轉轉小程序爲例，當用戶第一次打開時會先下載好全部代碼，而後再加載頁面；當用戶再次進入轉轉小程序時，會直接使用已下載的代碼，省去了代碼下載的過程，打開速度更快。

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

• 第一次打開轉轉小程序時白屏時間很長，由於要下載接近2.5M的代碼量，也就是說你的代碼越多，白屏時間越長，而轉轉APP採用的網頁離線機制體驗更佳：在用戶打開APP時就下載/更新離線包，這樣在用戶進入對應的網頁時，代碼已經下載好了，沒有漫長的白屏過程。
• 代碼有部分更新時，沒辦法進行增量更新，致使每次發版後，用戶都須要從新下載所有代碼

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

分包加載

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

在小程序啓動時，默認會下載主包並啓動主包內頁面，若是用戶須要打開分包內某個頁面，客戶端會把對應分包下載下來，下載完成後再進行展現。

總結以下：

• 打開小程序，默認先加載主包
• 進入分包頁面時，再加載對應分包

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

特性

• 1.7.3 及以上基礎庫開始支持，不支持的版本默認使用整包的方式
• 整個小程序全部分包大小不超過 4M，單個分包/主包大小不能超過 2M
• 分包數量目前沒有限制，也就是說你能夠放 N 個分包，甚至每一個頁面一個分包
• 入口頁面 / Tab 頁面必須在主包裏

關於主包

• 第一次進入小程序，默認下載主包代碼
• 分包之外的全部代碼，都會被打入主包
• 分包內代碼能夠引用主包內代碼

關於分包

• 由於存在資源依賴關係，微信的機制是先下載主包，後下載分包
• 分包目錄不能在主包目錄下面
• 分包能夠引用本身包內、主包內的資源，不能引用其餘分包內的資源

坑

• 小程序的打包機制僅僅是根據文件目錄打包，分包內require/import的任何文件，只要不在同一個目錄下面，都不會被打進分包，也就是說，類庫及一些公共文件，只能放在主包裏面，若是主包分包劃分很差的話，主包的大小也很難降下來
• 安卓系統進入分包頁面時，會出現一個醜陋的系統級的loading層，這必定程度上影響了安卓的體驗

轉轉的分包加載

轉轉小程序在使用分包以前，壓縮後的代碼量大概是2.45M，也就是說，每一個新用戶第一次都須要下載的2.45M代碼才能進入頁面，使用分包機制後，主包大小降爲1M左右，也就是說，若是是進入主包頁面，下載時間大約下降了60%

文件結構：

├── libs
├── components
├── pages  主包根目錄
├────index 首頁
├────post  發佈頁
├────...
├── subPages  分包根目錄
├────trade    交易分包
├────mine     個人頁面分包
├────...
複製代碼

咱們根據用戶訪問的軌跡，分紅了 20 個左右的分包。 例如 trade 包，裏面包含詳情頁、下單頁、支付頁、支付成功頁等，這條線的頁面，用戶可能不須要一進入小程序就使用，但一旦使用多是使用整個鏈條，所以能夠做爲一個分包。

歷史入口兼容

一個頁面放入分包以後，路徑會發生變化，例如詳情頁由 /pages/detail 變爲 /subPages/trade/detail，意味着若是用戶訪問了之前的 page 則得不到正確的頁面響應（例如：分享出去的小程序卡片、二維碼、公衆號推送消息等），這些靜態不可改變的歷史入口怎麼辦？咱們目前採用以下方案：

原來主包內的每一個頁面都保留，但代碼只保留跳轉邏輯，用戶進來後當即跳到對應的分包頁面，用戶幾乎是無感知的

這樣也會產生一點小問題：這些跳轉頁面也佔用必定的空間，接下來咱們會優化成在 onLaunch、頁面跳轉時進行判斷，直接跳入正確的分包頁面。

以上是轉轉在分包加載方面的實戰記錄，歡迎小程序開發者與咱們交流經驗。

另外，本文做者轉轉前端負責人張所勇，也會在掘金開發者大會・微信小程序專場分享轉轉小程序開發經驗，演講主題是「小程序 WebView 應用實踐」。

具體內容：從小程序基礎庫 1.6.4 開始，微信小程序支持 web-view 組件。web-view 組件是一個能夠用來承載網頁的容器，會自動鋪滿整個小程序頁面。但在 WebView 實踐中，性能、多端適配、小程序能力、存量 M 頁處理等都是開發中的痛點。我會在這次分享中，向你們介紹轉轉針對這些痛點設計的 Adapter，也會針對方法執行時機、 formID 收集、通訊、支付等問題介紹轉轉的解決方案。

專屬福利

掘金開發者大會 ∙ 微信小程序專場現已開始正式報名，如今正在 8 折優惠中。咱們特地爲本文讀者帶來了參與活動的專屬福利：掃碼進入小程序，輸入專屬優惠碼：zz，立減 99 元（限量 10 名）！活動中，不只有乾貨滿滿的技術盛宴，還包衆多福利獎品和價值 299 元的自助午飯哦！ 活動信息：

• 官網：conf.juejin.im
• 時間：2018年9月16日（週日）
• 地點：北京富力萬麗酒店
• 人數：600 名開發者