性能优化策略

性能优化是 uni-app 开发中不可忽视的环节，合理的优化策略能显著提升应用运行效率、降低资源消耗并改善用户体验。以下从多个维度展开具体优化方案。

减少数据绑定与渲染压力

频繁的数据绑定会导致不必要的渲染开销。在复杂列表场景中，使用 v-for 时应始终配合 :key 提高 diff 效率：

// 推荐写法
<template v-for="item in largeList" :key="item.id">
  <view>{{ item.content }}</view>
</template>

对于静态内容，可改用单次绑定的 v-once 指令：

<view v-once>固定标题文字</view>

深度监听对象时应当避免直接监听整个对象：

// 不推荐
watch: {
  deepObject: {
    handler() { /*...*/ },
    deep: true
  }
}

// 推荐改为监听具体属性
watch: {
  'deepObject.key': function() { /*...*/ }
}

图片资源优化策略

图片体积直接影响页面加载速度。建议采用以下方案：

1. 使用 tinypng 等工具压缩图片，通常能减少 60% 以上体积
2. 根据设备分辨率动态加载不同尺寸图片：

computed: {
  imgUrl() {
    return window.devicePixelRatio > 1 
      ? '/images/logo@2x.png'
      : '/images/logo.png'
  }
}

3. 对非首屏图片启用懒加载：

<image lazy-load src="background.jpg"></image>

组件化与代码分割

合理拆分组件能有效控制渲染粒度。对于复杂页面：

// 动态加载非必要组件
const HeavyComponent = () => import('@/components/HeavyComponent.vue')

export default {
  components: {
    HeavyComponent
  }
}

全局组件按需注册：

// main.js
Vue.component('CommonButton', () => import('@/components/CommonButton'))

网络请求优化

合并接口请求是减少网络延迟的有效手段。例如商品详情页可以：

async loadData() {
  // 合并商品基本信息和库存状态
  const [detail, stock] = await Promise.all([
    api.getDetail(this.id),
    api.getStock(this.id)
  ])
  // ...处理数据
}

启用持久化存储减少重复请求：

import { setStorageSync, getStorageSync } from '@uni/storage'

async fetchConfig() {
  const cacheKey = 'sysConfig'
  let config = getStorageSync(cacheKey)
  if (!config) {
    config = await api.getConfig()
    setStorageSync(cacheKey, config)
  }
  return config
}

动画性能提升方案

CSS 动画优先使用 transform 和 opacity：

/* 性能更好 */
.box {
  transition: transform 0.3s ease;
}
.box-active {
  transform: scale(1.1);
}

避免在动画中使用 width/height 等触发重排的属性。复杂动画可考虑使用 CSS 硬件加速：

.accelerate {
  will-change: transform;
  transform: translateZ(0);
}

内存管理实践

及时销毁全局事件监听：

export default {
  mounted() {
    this.resizeObserver = uni.onWindowResize(() => {
      // ...处理逻辑
    })
  },
  beforeDestroy() {
    this.resizeObserver && this.resizeObserver.off()
  }
}

大数据列表采用虚拟滚动技术：

<scroll-view 
  scroll-y 
  :style="{height: screenHeight + 'px'}"
  @scrolltolower="loadMore">
  <view v-for="item in virtualList" 
        :style="{height: itemHeight + 'px'}">
    {{ item.content }}
  </view>
</scroll-view>

打包体积控制

通过分包策略优化首屏加载：

// pages.json
{
  "subPackages": [{
    "root": "packageA",
    "pages": [
      "pages/category",
      "pages/detail"
    ]
  }]
}

分析并移除无用依赖：

# 使用 webpack-bundle-analyzer 分析
npm run build -- --report

渲染性能监测手段

在开发阶段启用性能面板：

// main.js
Vue.config.performance = process.env.NODE_ENV !== 'production'

关键路径添加性能标记：

export default {
  methods: {
    loadData() {
      const start = Date.now()
      // ...数据加载逻辑
      console.log(`数据加载耗时：${Date.now() - start}ms`)
    }
  }
}

平台特定优化

针对微信小程序可启用自定义组件复用：

// page.json
{
  "componentPlaceholder": {
    "custom-component": "view"
  }
}

H5 端启用路由预加载：

// manifest.json
{
  "h5": {
    "preload": {
      "type": "static",
      "include": ["pages/index"]
    }
  }
}