uniclound uniapp小程序性能及体验优化

1,251 阅读3分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情

这段时间,因为公司业务不是很多,然后就有时间玩一下新的玩意,然后就使用uniapp+uniclound无服务+uview ui开发了一款壁纸小程序,全免费哦(不需要自己的服务器),然后发现小程序性能不是很理想,就进行了一些优化处理,本文就是对这个过程中性能处理的方案进行一个总结。

uniapp小程序优化
  • 图片优化
    • 壁纸小程序中图片是非常多的,所以我们需要对图片的加载及显示做一个优化处理。
    • 懒加载 uview ui的image组件默认开启了懒加载,然而在image组件中 需要手动设置image的宽和高,便修改了uview的image组件,使之支持style样式

props: {
 // 只支持网络资源,只对微信小程序有效
 webp: {
  type: Boolean,
  default: true
 },le:{
     type:String,
     default:""
   }
},
computed: {
 wrapStyle() {
  let { style,width,height } = this;
  let styles = {};
  let _height = 0;
  //此处是新增style获取width,height
     if(style &&!width && !height) {
       let styleAry = style.split(',');
       if(styleAry.length>0) {
         for(let i in styleAry){
           let o = i.split(':')[1];
           if(i.includes('width'))  width = o
           if(i.includes('height')){_height = o;height = o} 
         }
       }
     }
  // 通过调用addUnit()方法,如果有单位,如百分比,px单位等,直接返回,如果是纯粹的数值,则加上rpx单位
 
  styles.width = this.$u.addUnit(width);
  styles.height = this.$u.addUnit(height);
 
  if(styles.height == 'auto' && _height == 0) styles.height = '100%'
  // 如果是配置了圆形,设置50%的圆角,否则按照默认的配置值
  styles.borderRadius = this.shape == 'circle' ? '50%' : this.$u.addUnit(this.borderRadius);
  // 如果设置圆角,必须要有hidden,否则可能圆角无效
  styles.overflow = this.borderRadius > 0 ? 'hidden' : 'visible';
  if (this.fade) {
   styles.opacity = this.opacity;
   styles.transition = `opacity ${Number(this.durationTime) / 1000}s ease-in-out`;
  }
  return styles;
 }
},
  • 列表使用小图 uniclound云开发图片使用的是阿里云的存储,所以直接可以在img的url参数上带一些特定参数进行裁剪,如:?x-oss-process=image/format,webp,image/resize,w_200/quality,q_100

  • 使用webp图片 使用方法同上,使用webp后1m图可以压缩到很大 ,微信档基础款在2.9.0以上,即可支持webp,所以无需担心,然后使用uview ui的image组件需要加上webp属性

image.png

  • 列表优化 使用content-visibility: auto[jishuin.proginn.com/p/763bfbd66…] 提高列表渲染性能
  • css优化 将常用组件的样式集中到一个样式表中,然后在app.vue中引入,可减少样式重复打包
  • 请求优化 使用缓存将接口返回的数据缓存到本地,并对数据进行一个hash处理,下次进来的时候,先使用缓存数据,再次请求,看有没有更新,有更新就更新数据,然后更新缓存
uniclound优化
  • 云函数优化

云函数处理慢,主要是在Waiting TTFB,然后针对这个,所以需要保持函数的热启动,提升函数启动性能,主要使用setInterval,并在页面离开时需要停止,并加上次数

warmUp(){
  //预热云函数
  this.setDetailTimer = setInterval(()=>{
    let pages = getCurrentPages();
    if(pages[pages.length-1]['route'] == 'pages/detail/detail'){
      return clearInterval(this.setDetailTimer);
    }
    this.timerNum++
    uniCloud.callFunction({
      name: 'query_map',
      data: {},
    });
  },this.warmTimer)
  this.timer =  setInterval(()=>{
    if(this.vuex_user){
      return clearInterval(this.timer)
    }
    this.timerNum++
    uniCloud.callFunction({
      name: 'user_authorize',data:{}})
  },this.warmTimer);
},

上面说的群是 @大帅老猿 大帅带领的“猿创营”,群里有很多开发大佬可以互相帮忙答疑和交流技术,同时大帅还会分享做外包,搞副业等,感兴趣的小伙伴可以留言“入群”。 以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端,上面说的小程序是:手机壁纸精选表情包,上面包含:精选手机壁纸美图、动漫二次元壁纸、明星创意潮图、动漫头像、动漫男头、二次元头像、二次元美女

gh_9296c45108e1_258 (3).jpg