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)
}
}
}
}