前端性能优化之uniapp

性能优化自古以来就是重中之重，这里就简单了解下吧（具体自己研究去，懂得都懂）：

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

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

2、减少高频动画和监听，减少对象数量

3、图片请压缩后使用，避免大图，简单代码能实现的就不要图片，也可采取svg去优化

4、组件的使用要合理规范，是否做成组件要结合实际业务情况

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方面，要知道哪些属性是有继承效果的，像字体、字体颜色、文字大小都是继承的，不要写那些没有意义的重复代码

没错，其实还有很多细节的东西，懂得都懂哈哈，下面贡献几个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;
}

归根结底一句话：大道至简，请减少重复的劳动力，2020快结束了，祝大家百尺竿头更进一步