想要微信小程序的用戶啟動體驗更快更優,少不了做一些開發優化工作,其中,代碼包體積優化可以從以下方面著手。
小程序代碼包體積優化建議
1.使用分包加載
首先推薦小程序開發者使用分包加載手段來優化小程序啟動耗時的問題,可以按照功能劃分,將小程序的頁面按使用頻率和場景拆分成不同分包,實現代碼包的按需加載,優化效果更明顯。另外,分包加載的幾個擴展功能都很好用,可以用獨立分包、分包預下載、分包異步化等都可以更好的幫助優化主包體積大小。
2.去除非必要的自定義組件和插件
在開發過程中,避免不了使用各種全局自定義組件及小插件,而這些插件會在小程序啟動時隨主包一起下載及啟動,同時注入JS代碼,這樣會對整個的啟動耗時有所影響。因此建議小程序開發者在以下情形中做出優化:
- 如果自定義組件只在某個分包的頁面中使用,應定義在頁面的配置文件中
- 全局引入的自定義組件會被認為是所有分包、所有頁面都需要的,會影響「按需注入」的效果和小程序代碼注入的耗時。
- 如果插件只在某個分包的中使用,請僅在分包中引用插件
- 如果確實需要在主包中或被多個分包使用的插件,仍可以考慮將插件置于一個分包,并通過「分包異步化」的形式異步引入。
3.控制資源文件大小
小程序代碼包在下載時會使用ZSTD算法進行壓縮,圖片、音頻、視頻、字體等資源文件會占用較多代碼包體積,并且通常難以進一步被壓縮,對于下載耗時的影響比代碼文件大得多。
建議開發者在代碼包內的圖片一般應只包含一些體積較小的圖標,避免在代碼包中包含或在WXSS中使用base64內聯過多、過大的圖片等資源文件。
4.優化圖片和靜態資源
圖片通常是體積最大的部分,建議從以下方面操作:
- 壓縮圖片:使用工具如TinyPNG、ImageOptim、Squoosh等在開發階段手動壓縮。
- 選擇合適的格式:使用WebP格式替代PNG/JPG,通常能減少25%-35%的體積。小程序基礎庫已廣泛支持WebP。對于簡單圖標,優先使用SVG(矢量、無損縮放)。
- 控制圖片尺寸:不要使用一張超大的圖然后通過CSS縮小顯示。根據實際顯示尺寸來提供圖片。
- 使用網絡圖片:將不常變動的大型圖片、背景圖等放到CDN上,通過https://鏈接引用,而不是放在代碼包里。這是減少代碼包體積最直接的方法之一。
5.及時清理內存
定期及時清理內存也很重要,無論是資源還是文件,定期清理都能省出空間。建議使用微信開發者工具提供的「代碼靜態依賴分析」,不定期地分析代碼包的文件構成和依賴關系,以此優化代碼包大小和內容。對于僅用于本地開發調試,不應包含在小程序代碼包的文件,可以使用工具設置的packOptions.ignore配置忽略規則。
以上就是最常見的小程序代碼包優化方法,給大家做個參考,除此之外,還有利用構建工具自動化等手段,做好小程序代碼包優化,能夠有效縮短啟動耗時,從而提升用戶體驗。

