要確保 uni-app 應用在 App 端啟動速度最快,可以采取以下優化措施:
1. 使用 nvue 代替 vue:
- 在 App 端,使用 nvue 頁面可以基于 weex 定制的原生渲染引擎,實現頁面原生渲染能力,提高頁面流暢性。如果對頁面性能要求較高,可以使用 nvue 頁面開發。
2. 優化啟動速度:
- 控制工程代碼體積,包括背景圖和本地字體文件大小,以減少對 App 啟動速度的影響。
- App 端的 splash 關閉有白屏檢測機制,如果首頁一直白屏或首頁本身就是一個空的中轉頁面,可能會造成 splash 10秒才關閉。可以通過優化首頁邏輯來解決
3. 設置為純 nvue 項目:
- 在 `manifest` 里設置 `app-plus` 下的 `renderer:"native"`,這種項目的啟動速度更快,2秒即可完成啟動。因為它整個應用都使用原生渲染,不加載基于 webview 的那套框架。
4. 分包加載:
- App 端支持分包,分包可以讓啟動時只加載部分 js。對于工程下 js 非常多的情況比較合適。
5. 優化包體積:
- 發行到小程序時,自帶引擎只有幾十K,主要是一個定制過的 Vue.js 核心庫。如果使用了 ES6 轉 ES5、CSS 對齊的功能,可能會增大代碼體積,可以配置這些編譯功能是否開啟。
- 通過搖樹優化機制,減少整體包體積。未搖樹優化前的 uni-app 整體包體積約 500k,服務器部署 gzip 后 162k。開啟搖樹優化需在 `manifest` 配置。
6. 減少頁面級渲染:
- 減少頁面級渲染可以提升性能。
7. 優化樣式渲染速度:
- 如果頁面背景是深色,在 vue 頁面中可能會發生新窗體剛開始動畫時是灰白色背景,動畫結束時才變為深色背景,造成閃屏。這是因為 webview 的背景生效太慢的問題。此時需將樣式寫在 `App.vue` 里,可以加速頁面樣式渲染速度。
8. 使用性能分析工具:
- UniApp 中集成了一些性能分析工具,比如可以通過 `uni.getPerformance()` 獲取當前頁面加載時間、傳輸時間、總時間等信息,還可以通過 `uni.createInnerAudioContext()` 監測音頻播放情況、通過 `uni.createVideoContext()` 監測視頻播放情況等。這些工具可以幫助開發者全面了解應用的性能狀況,從而進行優化。
通過上述措施,可以有效提升 uni-app 應用在 App 端的啟動速度。