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