要优化 uni-app 应用的加载速度,可以从以下几个方面入手:
1. 优化包体积:
- 发行到小程序时,自带引擎只有几十K,主要是一个定制过的 Vue.js 核心库。如果使用了 ES6 转 ES5、CSS 对齐的功能,可能会增大代码体积,可以配置这些编译功能是否开启。
- 对于 H5 端,uni-app 提供了摇树优化机制,未摇树优化前的 uni-app 整体包体积约 500k,服务器部署 gzip 后 162k。开启摇树优化需在 `manifest` 配置。
- App 端,如果选择纯 nvue 项目(在 `manifest` 里设置 `app-plus` 下的 `renderer:"native"`),包体积可以进一步减少约 2M。
2. 减少页面级渲染:
- 减少页面级渲染可以提升性能。
3. 使用 CSS 解决问题:
- 能用 CSS 解决的,不要用 JS。
4. 压缩图片:
- 减少 M 级图片,在保证分辨率的同时,尽量压缩图片。
5. 减少 HTTP 请求:
- 通过合并 CSS 和 JavaScript 文件,减少 HTTP 请求次数也是优化加载速度的有效手段。
6. 使用 nvue 代替 vue:
- 在 App 端,nvue 页面基于原生渲染引擎,提高了页面流畅性。若对页面性能要求较高可以使用此方式开发。
7. 优化启动速度:
- App 端的 splash 关闭有白屏检测机制,如果首页一直白屏或首页本身就是一个空的中转页面,可能会造成 splash 10秒才关闭。可以通过优化首页逻辑来解决。
- App 端使用自定义组件模式时启动速度更快,首页为 nvue 页面时启动速度更快。
- 设置为纯 nvue 项目(在 `manifest` 里设置 `app-plus` 下的 `renderer:"native"`),这种项目的启动速度更快,2秒即可完成启动。
8. 代码拆分和懒加载:
- 根据页面和功能的使用情况,将代码拆分为多个模块,并按需引入,以减小初始加载体积。
- 图片懒加载通过 `image` 组件的 `lazy-load` 属性实现,可以显著减少首屏的加载时间。
- 组件懒加载可以避免一次性加载所有组件,而是在需要时动态加载组件。
9. 使用缓存机制:
- 通过设置缓存策略,减少用户每次访问时的加载时间。常见的缓存策略包括静态资源缓存和 Service Worker 缓存(适用于 H5)。
10. 性能分析工具:
- 使用开发者工具提供的性能分析工具,例如性能面板、网络面板等,分析应用性能瓶颈。
通过上述方法,可以有效提升 uni-app 应用的加载速度和性能。