要确保 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 端的启动速度。