uniapp项目优化

uniapp官方性能优化文档:https://uniapp.dcloud.io/performance

1、使用v3编译,跟上官方每一次优化配置和建议

2、减少高频动画和监听,减少对象数量,避免接口调用频繁,善用数据缓存

3、图片请压缩后使用,避免大图,必要时可以考虑雪碧图或svg,简单代码能实现的就不要图片

4、合理使用组件复用减少代码冗余,多学习api用函数式编程解决问题

6、善用封装以减少代码量(比如scss常量和方法封装、接口请求封装)

7、项目pages过多后请采取分包处理(app也可)https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization

8、必要时可以使用nvue来编写,但nvue语法比较严格请自行看文档

9、关于用户体验,巧用渐变动画,注重页面细节,图片可用懒加载,更多可看uview-ui

10、请不要滥用本地存储,局部页面之间的传参用url,如果用本地存储传递数据要命名规范和按需销毁

11、有官方API的就不要额外引用js插件增加项目体积,比如url传参加密直接用encodeURIComponent() 和decodeURIComponent() 

12、减少组件深层嵌套,减少页面目录层级,合理利用相对路径

13、css方面,要知道哪些属性是有继承效果的,像字体、字体颜色、文字大小都是继承的,不要写那些没有意义的重复代码

图片压缩网站推荐:https://tinypng.com/

几个常用的scss封装参考:

@charset "utf-8";

//增强定位,兼容高,你值得拥有
@mixin pos($p:absolute,$val1:0rpx,$val2:0rpx,$z:1,$t:1){
    position:$p;
    @if $t == 1{
        top:$val1;
        left:$val2;
    }@else if $t == 2{
        top:$val1;
        right:$val2;
    }@else if $t == 3{
        bottom:$val1;
        left:$val2;
    }@else{
        bottom:$val1;
        right:$val2;
    }
    z-index:$z;
}

// 单行省略号
@mixin toe() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

// 多行省略号
@mixin bov($num:2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

//flex布局
@mixin flex($flex1:row nowrap,$flex2:flex-start,$flex3:flex-start){
    display: flex;
    flex-flow: $flex1;
    justify-content: $flex2;
    align-items: $flex3;
}

14、善用节流和防抖

节流:触发事件n秒内只执行一次,n秒未过,再次触发无效

防抖:等待n秒后执行某函数,若等待期间再次被触发,则等待时间重新初始化

 

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行,false 表非立即执行
 */
function debounce(func,wait,immediate) {
    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

 

 

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版,2 表定时器版
 */
function throttle(func, wait ,type) {
    if(type===1){
        let previous = 0;
    }else if(type===2){
        let timeout;
    }
    return function() {
        let context = this;
        let args = arguments;
        if(type===1){
            let now = Date.now();

            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}

 

 转载于:https://www.cnblogs.com/nanyang520/p/14151213.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章