要優(yōu)化 uni-app 應(yīng)用的加載速度,可以從以下幾個(gè)方面入手:
1. 優(yōu)化包體積:
- 發(fā)行到小程序時(shí),自帶引擎只有幾十K,主要是一個(gè)定制過的 Vue.js 核心庫(kù)。如果使用了 ES6 轉(zhuǎn) ES5、CSS 對(duì)齊的功能,可能會(huì)增大代碼體積,可以配置這些編譯功能是否開啟。
- 對(duì)于 H5 端,uni-app 提供了搖樹優(yōu)化機(jī)制,未搖樹優(yōu)化前的 uni-app 整體包體積約 500k,服務(wù)器部署 gzip 后 162k。開啟搖樹優(yōu)化需在 `manifest` 配置。
- App 端,如果選擇純 nvue 項(xiàng)目(在 `manifest` 里設(shè)置 `app-plus` 下的 `renderer:"native"`),包體積可以進(jìn)一步減少約 2M。
2. 減少頁面級(jí)渲染:
- 減少頁面級(jí)渲染可以提升性能。
3. 使用 CSS 解決問題:
- 能用 CSS 解決的,不要用 JS。
4. 壓縮圖片:
- 減少 M 級(jí)圖片,在保證分辨率的同時(shí),盡量壓縮圖片。
5. 減少 HTTP 請(qǐng)求:
- 通過合并 CSS 和 JavaScript 文件,減少 HTTP 請(qǐng)求次數(shù)也是優(yōu)化加載速度的有效手段。
6. 使用 nvue 代替 vue:
- 在 App 端,nvue 頁面基于原生渲染引擎,提高了頁面流暢性。若對(duì)頁面性能要求較高可以使用此方式開發(fā)。
7. 優(yōu)化啟動(dòng)速度:
- App 端的 splash 關(guān)閉有白屏檢測(cè)機(jī)制,如果首頁一直白屏或首頁本身就是一個(gè)空的中轉(zhuǎn)頁面,可能會(huì)造成 splash 10秒才關(guān)閉??梢酝ㄟ^優(yōu)化首頁邏輯來解決。
- App 端使用自定義組件模式時(shí)啟動(dòng)速度更快,首頁為 nvue 頁面時(shí)啟動(dòng)速度更快。
- 設(shè)置為純 nvue 項(xiàng)目(在 `manifest` 里設(shè)置 `app-plus` 下的 `renderer:"native"`),這種項(xiàng)目的啟動(dòng)速度更快,2秒即可完成啟動(dòng)。
8. 代碼拆分和懶加載:
- 根據(jù)頁面和功能的使用情況,將代碼拆分為多個(gè)模塊,并按需引入,以減小初始加載體積。
- 圖片懶加載通過 `image` 組件的 `lazy-load` 屬性實(shí)現(xiàn),可以顯著減少首屏的加載時(shí)間。
- 組件懶加載可以避免一次性加載所有組件,而是在需要時(shí)動(dòng)態(tài)加載組件。
9. 使用緩存機(jī)制:
- 通過設(shè)置緩存策略,減少用戶每次訪問時(shí)的加載時(shí)間。常見的緩存策略包括靜態(tài)資源緩存和 Service Worker 緩存(適用于 H5)。
10. 性能分析工具:
- 使用開發(fā)者工具提供的性能分析工具,例如性能面板、網(wǎng)絡(luò)面板等,分析應(yīng)用性能瓶頸。
通過上述方法,可以有效提升 uni-app 應(yīng)用的加載速度和性能。