微信小程序如何分包?

語言: CN / TW / HK

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

一:數據包分包

數據包分包是我在做一個小程序藍牙開鎖的需求的時候遇到的,前端和硬件工程師直接通信,一個協議往往不是一兩個字符,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五大核心概念,看完這篇文章就夠了