如何減小微信小程式程式碼包大小

麥機長發表於2021-11-05

原作於:https://captnotes.com/how_to_reduce_package_size_of_weapp

這兩天被小程式程式碼包大小暴漲的問題困擾了挺久。簡單說說怎麼回事吧,就是之前好端端的微信小程式,最近配合新需求作了些改動,程式碼包大小突然翻了兩倍多,從不到2MB一下子超過5MB,超過了騰訊對小程式程式碼包大小不得超過2MB的限制,從而沒法上傳,也就沒法真機除錯,更不能釋出了。

首先想到的是把所有圖片資源都上傳到檔案伺服器,騰出本地空間。但圖片並不多,還用TinyPNG壓縮過,心算都知道不可能超過3MB。果然,即便移除了所有圖片,程式碼包依然還有4MB多。

Google一番,不少人都遇到過這個問題。網上給出的解決辦法幾乎清一色都是拆分程式碼包,雖然單個程式碼包不能超過2MB,但通過拆分,總共不超過20MB就行。不是沒想過拆,是感覺沒這個必要,之前統計過,程式碼檔案加一起也就1.2MB,所以就沒考慮過分包。既然眾口一詞都是教人如何分包,萬一真是包治百病的濟世良方呢,試試看,反正不要錢。

具體的分包策略和方式請參考官方文件,這裡懶得贅述。

半信半疑地分完包,主包還是超過4MB。要不就是改成雲函式,但畢竟不是隻寫了個Hello World,改動太大,暫不考慮。但是網上找不到別的招兒了,沒辦法,自己琢磨、另闢蹊徑唄。

文字檔案不可能那麼大,圖片又都被我挪走了,那麼嫌疑最大就是第三方SDK。我只引用了兩個SDK,這次並沒增加,只是將其中一個的版本升了級。首先查了一下該SDK的Bug列表,沒有相關問題反饋。那會不會是升級之後,老版本沒有及時清理,從而也被算進去了呢?因此我用npm uninstall命令解除安裝了該SDK,並重新構建了NPM,然而效果如同蚍蜉撼樹。

直覺告訴我,方向肯定沒問題。問題具體出在哪兒呢?我開始打起微信開發者工具的算盤。

程式碼包大小統計

有什麼辦法可以看到程式碼包裡具體的檔案大小嗎?長話短說,此處省去N千字。“詳情”→“基本資訊”裡的“程式碼依賴分析”猛地蹦到我的視線裡,讓我立馬想起Android Studio裡的Remove Unused Resources——對呀,找找看有沒有無效的引用。

部分清理後的程式碼依賴分析結果

分析結果不僅按照方塊面積來視覺化檔案大小,還可以列出哪些檔案是沒有被依賴的。這就好比洩露的記憶體,都沒人用了,還在那兒佔著地方。根據分析結果,從大到小將無依賴的程式碼檔案該刪的刪、該砍的砍,在不影響小程式正常執行的前提下將主程式碼包大小降到2MB以下不是什麼難事。

相關文章