如何优化uniapp项目？以下文章将与大家分享一些uniapp项目的优化方法和建议，希望对大家有所帮助。
介绍：性能优化自古以来就是重中之重。最完整的uniapp项目优化方法将根据开发情况进行补充
1.将复杂页面数据区域封装成组件
场景：
例如，该项目包含类似的论坛页面：点击拇指图标，赞数应立即，赞数应立即 1、会导致所有页面级数据从js层同步到视图层，导致整个页面的数据更新，导致点击延迟卡顿
优化方案：
对于复杂的页面，在更新某个区域的数据时，需要将该区域制成组件，以便在更新数据时只更新组件
注：app-nvue和h5没有这个问题；差异的原因是小程序目前只提供组件差异更新机制，不能自动计算所有页面差异
2.避免使用大图
场景：
如果页面中大量使用大图资源，会导致页面切换卡住，导致系统内存增加，甚至白屏崩溃；大量二进制文件 base64 ，资源也非常耗费
优化方案：
请在压缩后使用图片，以避免大图。如有必要，可以考虑雪碧图或svg。如果可以实现简单的代码，请不要使用图片
3.小程序，APP分包处理pages太多
去官网手册查配置
4.图片懒加载
功能描述：
此功能仅针对微信小程序，App、百度小程序、字节跳动小程序有效，默认开启
去uview手册查看配置
5.禁止滥用本地存储
不要滥用本地存储。URL用于局部页面之间的传输。如果使用本地存储和传输数据，则需要命名规范并按需销毁
6.可以在外界定义变量
在 uni-app 中，定义在 data 内部数据将通知视图层重新渲染页面；因此，如果不是视图所需的变量，则可以不定义 data 在中间，可以在外部定义变量或直接挂载 vue实例 以免造成资源浪费
7.分批加载数据优化页面渲染
场景：
当页面初始化时，逻辑层将大量数据一次性传输到视图层，使视图层一次渲染大量节点，可能导致通信缓慢，页面切换卡住
优化方案：
以局部更新页面的方式渲染页面；例如：服务器返回回 100条数据 ，可分批加载，一次加载 50条 ， 500ms 下一次加载后进行
8.避免视图层和逻辑层频繁通信
减少 scroll-view 组件的 scroll 事件监控，当监控 scroll-view 当滚动事件发生时，视图层会经常将数据发送到逻辑层
监听 scroll-view 当组件滚动事件发生时，不要实时更改 scroll-top / scroll-left 属性，因为当监控滚动时，视图层通信到逻辑层，改变 scroll-top / scroll-left 当逻辑层向视图层通信时，可能会导致通信卡顿
注意 onPageScroll 的使用， onPageScroll 监控时，视图层会频繁将数据发送到逻辑层
多使用 css动画 ，而不是通过js定时器操作界面制作动画
如需在 canvas 里面做跟手操作， app端 建议使用 renderjs ，建议使用小程序端 web-view 组件； web-view 页面没有逻辑层和视图层分离的概念，自然不会有通信损坏
9.CSS优化
要知道哪些属性有继承效果，比如字体、字体颜色、文字大小，禁止无意义的重复代码
10.善用节流和防抖
防抖：
等待n秒后执行函数。如果在等待期间再次被触发，等待时间将重新初始化
节流：
触发事件n秒内只执行一次，n秒未过，再次触发无效
11.优化页面切换动画
场景：
当页面初始化时，有大量的图片或原始组件渲染和大量的数据通信，新的页面渲染和窗口进入动画抓取资源，导致页面切换卡、帧丢失
优化方案：
建议延时 100ms~300ms 渲染图片或复杂的原始组件，分批进行数据通信，以减少一次性渲染节点的数量
App 端动画效果可自定义； popin/popout 双窗联动挤压动画效果消耗更多的资源。如果在动画过程中页面上执行耗时的js，可能会导致动画帧丢失；此时，可以使用消耗更少资源的动画效果，如 slide-in-right / slide-out-right
App-nvue 和 H5 ，还支持页面预载，uni.preloadPage，能提供更好的使用体验
12.优化背景色闪白
场景：
当你进入新页面时，背景是白色的。如果页面背景是深色的，在vue页面中可能会出现新窗口。动画开始时，背景是灰白色的，动画结束时会变成深色背景，导致闪屏
优化方案：
将样式写在 App.vue 内部，可以加速页面样式渲染的速度； App.vue 里面的风格是全局风格，每次新开页面都会优先加载 App.vue 里面的样式，然后加载普通的样式， vue 页面的样式
app端 还可以在 pages.json 的页面的 style 单独配置页面原始背景色，如在页面中 globalStyle-