一起养成写作习惯!这是我参与「掘金日新计划 · 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属性
- 列表优化 使用
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);
},
上面说的群是 @大帅老猿 大帅带领的“猿创营”,群里有很多开发大佬可以互相帮忙答疑和交流技术,同时大帅还会分享做外包,搞副业等,感兴趣的小伙伴可以留言“入群”。 以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端,上面说的小程序是:手机壁纸精选表情包,上面包含:精选手机壁纸美图、动漫二次元壁纸、明星创意潮图、动漫头像、动漫男头、二次元头像、二次元美女