uniapp项⽬优化⽅式及建议
⽬录
1.复杂页⾯数据区域封装成组件
2.避免使⽤⼤图
3.⼩程序、APP分包处理pages过多
4.图⽚懒加载
5.禁⽌滥⽤本地存储
6.可在外部定义变量
7.分批加载数据优化页⾯渲染
8.避免视图层和逻辑层频繁进⾏通讯
9.CSS优化
10.善⽤节流和防抖
11.优化页⾯切换动画
12.优化背景⾊闪⽩
13.优化启动速度
14.优化包体积
15.禁⽌滥⽤外部js插件
1.复杂页⾯数据区域封装成组件
场景：
例如项⽬⾥包含类似论坛页⾯：点击⼀个点赞图标，赞数要⽴即+1，会引发页⾯级所有的数据从js层向视图层的同步，造成整个页⾯的数据更新，造成点击延迟卡顿
优化⽅案：
对于复杂页⾯，更新某个区域的数据时，需要把这个区域做成组件，这样更新数据时就只更新这个组件
注：app-nvue和h5不存在此问题；造成差异的原因是⼩程序⽬前只提供了组件差量更新的机制，不能⾃动计算所有页⾯差量
2.避免使⽤⼤图
场景：
页⾯中若⼤量使⽤⼤图资源，会造成页⾯切换的卡顿，导致系统内存升⾼，甚⾄⽩屏崩溃；对⼤体积的⼆进制⽂件进⾏base64 ，也⾮常耗费资源
优化⽅案：
图⽚请压缩后使⽤，避免⼤图，必要时可以考虑雪碧图或svg，简单代码能实现的就不要图⽚
3.⼩程序、APP分包处理pages过多
4.图⽚懒加载
功能描述：
此功能只对⼩程序、App、百度⼩程序、字节跳动⼩程序有效，默认开启
5.禁⽌滥⽤本地存储
不要滥⽤本地存储，局部页⾯之间的传参⽤url，如果⽤本地存储传递数据要命名规范和按需销毁
6.可在外部定义变量
在 uni-app 中，定义在 data ⾥⾯的数据每次变化时都会通知视图层重新渲染页⾯；所以如果不是视图所需要的变量，可以不
定义在 data 中，可在外部定义变量或直接挂载在 vue实例上，以避免造成资源浪费
7.分批加载数据优化页⾯渲染
svg和h5的关系场景：
页⾯初始化时，逻辑层⼀次性向视图层传递很⼤的数据，使视图层⼀次性渲染⼤量节点，可能造成通讯变慢、页⾯切换卡顿
优化⽅案：
以局部更新页⾯的⽅式渲染页⾯；如：服务端返回 100条数据，可进⾏分批加载，⼀次加载 50条， 500
ms  后进⾏下⼀次加载
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->style->app-plus->background 下配置全局背景⾊
"style": { "app-plus": { "background":"#000000" } }
nvue页⾯不存在此问题，也可以更改为nvue页⾯
13.优化启动速度
⼯程代码越多，包括背景图和本地字体⽂件越⼤，对⼩程序启动速度有影响，应注意控制体积
App端的 splash 关闭有⽩屏检测机制，如果⾸页⼀直⽩屏或⾸页本⾝就是⼀个空的中转页⾯，可能会造成 splash 10秒才关闭
App端使⽤v3编译器，⾸页为 nvue页⾯时，并设置为fast启动模式，此时App启动速度最快
App设置为纯 nvue项⽬（manifest⾥设置app-plus下的renderer:"native"），这种项⽬的启动速度更快，2秒即可完成启动；因为它整个应⽤都使⽤原⽣渲染，不加载基于webview的那套框架
14.优化包体积
uni-app 发⾏到⼩程序时，如果使⽤了 es6 转 es5 、css 对齐的功能，可能会增⼤代码体积，可以配置这些编译功能是否开启
uni-app 的 H5端，uni-app 提供了摇树优化机制，未摇树优化前的 uni-app 整体包体积约 500k，服务器部署 gzip 后162k。开启摇树优化需在manifest配置
uni-app 的 App端，Android 基础引擎约 9M ，App 还提供了扩展模块，⽐如地图、蓝⽛等，打包时如不需要这些模块，可以裁剪掉，以缩⼩发⾏包；体积在 manifest.json-App 模块权限⾥可以选择
App端⽀持如果选择纯nvue项⽬（manifest⾥设置app-plus下的renderer:"native"），包体积可以进⼀步减少2M左右App端在 HBuilderX 2.7 后，App 端下掉了⾮v3 的编译模式，包体积下降了3M
15.禁⽌滥⽤外部js插件
描述：
有官⽅API的就不要额外引⽤js插件增加项⽬体积
例如：
url传参加密直接⽤ encodeURIComponent() 和 decodeURIComponent()
到此这篇关于uniapp项⽬优化⽅式及建议的⽂章就介绍到这了，更多相关uniapp项⽬优化内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。