微信小程式如何分包？

語言: CN / TW / HK
時間 2022-02-17 09:15:05

在分包的時候，首先大家得明白什麼叫分包，分包的意義是什麼？在我的工作中，我接觸到了三種分包，當然在不同的場景下，分包的概念有所不同。

一：資料包分包

資料包分包是我在做一個小程式藍芽開鎖的需求的時候遇到的，前端和硬體工程師直接通訊，一個協議往往不是一兩個字元，100-200個字元是很正常的，你直接傳資料包是會失敗的。因為資料傳輸大於20位元組就會丟包，所有需要分包。

具體的分包細節，大家可以移步到我這篇文章，這裡面有詳細介紹。 \ 小程式藍芽開鎖，前端是如何直接和硬體進行資料互動的？

二：webpack大法之code splitting。

code splitting是我在做前端效能優化的時候用到的，code splitting 叫做程式碼分割，很多人也把它叫做分包。當我們的專案比較大的時候，打包後的app.js的體積比較大，首屏載入時間過長，十分影響使用者體驗。

code splitting 怎麼做？

主要有兩種方式： \ ①路由懶載入 \ ②分離業務和第三方庫（vendor）

具體的細節，大家可以移步到我這篇文章哦。 \ 前端效能優化，如何提高首屏載入速度？

三：微信小程式分包

微信小程式分包，就是我們今天的主題。有時候我們的小程式太大，首次開啟小程式的時候回比較慢，這個時候我們可以試試分包操作。分包可以讓使用者在操作小程式的時候按需下載資源（使用者在進入某些頁面的時候才去下載相應的資源，可以加快小程式的速度，優化使用者體驗。）。

目前小程式分包大小有以下限制：

  • 整個小程式所有分包大小不超過 20M
  • 單個分包/主包大小不能超過 2M

1.小試牛刀： 我把兩張圖片比較大的圖片資源放進專案，然後打包。

image.png

當我們上傳程式碼的時候就會發現會有提示：分包大小超過限制。

image.png

我們點選檢視看檔案列表，就會發現我們剛剛的兩張圖就已經佔了1M多。加上我們其他的業務程式碼，就超過2M了。

image.png

這是因為微信小程式程式碼有個2M限制，所以有的時候放圖片都得忍著點，不敢把太大的放在小程式裡面，只能放遠端；但是隨著專案不斷迭代更新，程式碼圖片越來越多，開發的時候更加小心翼翼。是不是很不舒服，還能不能讓我舒服的敲程式碼了。

  • 微信小程式每個分包的大小是2M，總體積一共不能超過20M。
  • 百度小程式每個分包的大小是2M，總體積一共不能超過8M。
  • 支付寶小程式每個分包的大小是2M，總體積一共不能超過8M。
  • QQ小程式每個分包的大小是2M，總體積一共不能超過24M。
  • 位元組小程式每個分包的大小是2M，總體積一共不能超過16M（位元組小程式基礎庫 1.88.0 及以上版本開始支援，位元組小程式開發者工具請使用大於等於 2.0.6 且小於 3.0.0 的版本）。

為了模擬程式碼過大，必須分包，我特意複製了40多個檔案，並在pages.json中配置的page中配置，來模擬專案業務程式碼過大的情況。

image.png

image.png

當我們打包上傳，就會發現同樣會提示：分包大小超過限制，檢視列表，就能發現我們剛剛模擬的業務程式碼。

image.png

因小程式有體積和資源載入限制，各家小程式平臺提供了分包方式（這裡使用的是uni-app技術），優化小程式的下載和啟動速度。

所謂的主包，即放置預設啟動頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 指令碼；而分包則是根據pages.json的配置進行劃分。

在小程式啟動時，預設會下載主包並啟動主包內頁面，當用戶進入分包內某個頁面時，會把對應分包自動下載下來，下載完成後再進行展示。此時終端介面會有等待提示。

所以接下來，我們就需要對這些業務程式碼進行分包。

tips:值得注意的是，如果你要分包，你要分包的檔案就不能再放在pages下面來了，不然就會# 分包報錯pages不應該在分包subPackages[x] 中

所有我們需要把剛剛的資料夾放在與pages同級的目錄，並且引入路徑也要做對應的調整。

image.png

再次打包上傳，還是會提示有限制。檢視列表，就是剛剛改寫的路徑，說明我們改寫路徑成功了。

image.png

改寫成功後，就開始正式分包了。

就需要你在page.json中，把剛剛的業務程式碼複製在subPackages下面，並使用相對路徑。

image.png

我們來看看打包後的app.js

image.png

分包完成之後，我們再次打包上傳，發現上傳成功了。

image.png

登入我們的管理後臺瞄一眼，完美!

image.png

總結：微信小程式分包並不難，需要注意的是微信小程式每個分包的大小是2M，總體積一共不能超過20M。如果要分包，那麼就需要把分包的模組放在與pages同級，而不能放在下級，放在同級後，要分包也必須得整個模組進行分包。不能同一個模組有的分包，有的不分包，不然微信會報錯。首頁、公共模組的方法、基礎元件等通用模組一定要放在主包，這樣在載入分包的時候，保證通用模組存在。最終打包上傳的是app.js，在裡面可以看見我們分包的實際情況。

今天的分享就到這裡吧，That's all. Thank you.

筆者往期好文：

前端效能優化，如何提高首屏載入速度？

前端技術日新月異，vue3.0的時代已經來臨...

vuex五大核心概念，看完這篇文章就夠了

「」
「」