# 代碼包體積優(yōu)化
啟動性能優(yōu)化最直接的手段是降低代碼包大小,代碼包大小直接影響了下載耗時,影響用戶啟動小程序時的體驗。
開發(fā)者可以采取以下手段優(yōu)化代碼包體積:
# 1. 合理使用分包加載
推薦所有小程序使用
使用 分包加載 是優(yōu)化小程序啟動耗時效果最明顯的手段。建議開發(fā)者按照功能劃分,將小程序的頁面按使用頻率和場景拆分成不同分包,實現(xiàn)代碼包的按需加載。
分包加載具有以下優(yōu)勢:
- 承載更多功能:小程序單個代碼包的體積上限為 2M,使用分包可以提升小程序代碼包總體積上限,承載更多的功能與服務(wù)。
- 降低代碼包下載耗時:使用分包后可以顯著減少啟動時需要下載的代碼包大小,在不影響功能正常使用的前提下,有效降低啟動耗時。
- 降低小程序代碼注入耗時:若未開啟按需注入,小程序編譯時會將所有 js 文件打包成同一個文件一次性的注入,并執(zhí)行所有頁面和自定義組件的代碼。分包后可以降低注入和實際執(zhí)行的代碼量,從而降低注入耗時。
- 降低頁面渲染耗時:使用分包可以避免不必要的組件和頁面初始化。
- 降低內(nèi)存占用:分包能夠?qū)崿F(xiàn)頁面、組件和邏輯較粗粒度的按需加載,從而降低內(nèi)存的占用。
此外,結(jié)合分包加載的幾個擴展功能,可以進(jìn)一步優(yōu)化啟動耗時:
1.1 獨立分包
小程序中的某些場景(如廣告頁、活動頁、支付頁等),通常功能不是很復(fù)雜且相對獨立,對啟動性能有很高的要求。獨立分包可以獨立于主包和其他分包運行。從獨立分包頁面進(jìn)入小程序時,不需要下載主包。建議開發(fā)者將部分對啟動性能要求很高的頁面放到特殊的獨立分包中。
1.2 分包預(yù)下載
在使用「分包加載」后,雖然能夠顯著提升小程序的啟動速度,但是當(dāng)用戶在使用小程序過程中跳轉(zhuǎn)到分包內(nèi)頁面時,需要等待分包下載完成后才能進(jìn)入頁面,造成頁面切換的延遲,影響小程序的使用體驗。分包預(yù)下載便是為了解決首次進(jìn)入分包頁面時的延遲問題而設(shè)計的。
獨立分包和分包預(yù)下載可以配合使用,獲得更好的效果,詳情請參考獨立分包與分包預(yù)下載教程
1.3 分包異步化
「分包異步化」將小程序的分包從頁面粒度細(xì)化到組件甚至文件粒度。這使得本來只能放在主包內(nèi)頁面的部分插件、組件和代碼邏輯可以剝離到分包中,并在運行時異步加載,從而進(jìn)一步降低啟動所需的包大小和代碼量。
分包異步化能有效解決主包大小過度膨脹的問題。
# 2. 避免非必要的全局自定義組件和插件
在 app.json 中通過 usingComponents 全局引用的自定義組件和通過 plugins 全局引入的插件,會在小程序啟動時隨主包一起下載和注入 JS 代碼,影響啟動耗時。
即使擴展庫和部分官方插件不占用主包大小,但是啟動時仍然需要下載和注入 JS 代碼,對啟動耗時的影響和其他插件并沒有區(qū)別。
- 如果自定義組件只在某個分包的頁面中使用,應(yīng)定義在頁面的配置文件中
- 全局引入的自定義組件會被認(rèn)為是所有分包、所有頁面都需要的,會影響「按需注入」的效果和小程序代碼注入的耗時。
- 如果插件只在某個分包的中使用,請僅在分包中引用插件
# 3. 控制代碼包內(nèi)的資源文件
小程序代碼包在下載時會使用 ZSTD 算法進(jìn)行壓縮,圖片、音頻、視頻、字體等資源文件會占用較多代碼包體積,并且通常難以進(jìn)一步被壓縮,對于下載耗時的影響比代碼文件大得多。
建議開發(fā)者在代碼包內(nèi)的圖片一般應(yīng)只包含一些體積較小的圖標(biāo),避免在代碼包中包含或在 WXSS 中使用 base64 內(nèi)聯(lián)過多、過大的圖片等資源文件。這類文件應(yīng)盡可能部署到 CDN,并使用 URL 引入。
# 4. 及時清理無用代碼和資源
除了工具默認(rèn)忽略或開發(fā)者明確聲明忽略的文件外,小程序打包會將工程目錄下所有文件都打入代碼包內(nèi)。意外引入的第三方庫、版本迭代中被廢棄的代碼或依賴、產(chǎn)品環(huán)境不需要的測試代碼、未使用的組件、插件、擴展庫,這些沒有被實際使用到的文件和資源也會被打入到代碼包里,從而影響到代碼包的大小。
建議使用微信開發(fā)者工具提供的「代碼靜態(tài)依賴分析」,不定期地分析代碼包的文件構(gòu)成和依賴關(guān)系,以此優(yōu)化代碼包大小和內(nèi)容。對于僅用于本地開發(fā)調(diào)試,不應(yīng)包含在小程序代碼包的文件,可以使用工具設(shè)置的 packOptions.ignore 配置忽略規(guī)則。
在使用打包工具(如 Webpack、Rollup 等)對小程序代碼進(jìn)行預(yù)處理時,可以利用 tree-shaking 等特性去除冗余代碼,也要注意防止打包時引入不需要的庫和依賴。