前端性能优化之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)
            }
        }
    }
}

 

 

归根结底一句话：大道至简