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

