vue3性能优化实战之干货篇

Vue3性能优化实战指南：提升应用性能的8个关键技巧

📈 本文总结了 Vue3 项目中最实用的性能优化方案，从代码层面到构建部署，全方位提升应用性能。

作者：沈大大

更新时间：2024-03-08

[TOC]

一、代码层面优化

1.1 合理使用 v-show 和 v-if

// ❌ 频繁切换时使用 v-if
<template>
  <div v-if="visible">
    <!-- 复杂的组件内容 -->
  </div>
</template>

// ✅ 频繁切换时使用 v-show
<template>
  <div v-show="visible">
    <!-- 复杂的组件内容 -->
  </div>
</template>

1.2 使用 computed 缓存计算结果

// ❌ 每次渲染都重新计算
const filteredList = list.value.filter(item => 
  item.price > 100 && item.category === 'electronics'
)

// ✅ 使用 computed 缓存结果
const filteredList = computed(() => {
  return list.value.filter(item => 
    item.price > 100 && item.category === 'electronics'
  )
})

1.3 大数据列表优化

<script setup lang="ts">
import { ref } from 'vue'
import VirtualList from '@/components/VirtualList.vue'

interface ListItem {
  id: number
  title: string
}

const items = ref<ListItem[]>([])
const itemHeight = 50

// 虚拟列表组件
const VirtualList = defineComponent({
  props: {
    items: Array,
    itemHeight: Number,
    visibleItems: Number
  },
  setup(props) {
    const startIndex = ref(0)
    const visibleData = computed(() => {
      return props.items.slice(
        startIndex.value,
        startIndex.value + props.visibleItems
      )
    })
    
    return { visibleData }
  }
})
</script>

<template>
  <VirtualList
    :items="items"
    :item-height="itemHeight"
    :visible-items="10"
  />
</template>

二、组件优化

2.1 组件懒加载

// router/index.ts
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue')
  }
]

// App.vue
const HeavyComponent = defineAsyncComponent(() =>
  import('./components/HeavyComponent.vue')
)

2.2 避免不必要的组件更新

// ❌ 父组件更新导致子组件不必要的重渲染
<template>
  <child-component :data="data" />
</template>

// ✅ 使用 v-memo 缓存组件
<template>
  <child-component 
    v-memo="[data.id]"
    :data="data" 
  />
</template>

三、数据处理优化

3.1 大数据响应式优化

// ❌ 大数据全响应式
const data = ref({
  // 大量数据...
})

// ✅ 使用 shallowRef
const data = shallowRef({
  // 大量数据...
})

// 仅在需要时触发响应
triggerRef(data)

3.2 避免深层监听

// ❌ 深层监听开销大
watch(
  () => data.value,
  () => {
    // 处理逻辑
  },
  { deep: true }
)

// ✅ 监听具体属性
watch(
  () => data.value.specificProp,
  () => {
    // 处理逻辑
  }
)

四、构建优化

4.1 路由懒加载

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor': ['vue', 'vue-router', 'pinia'],
          'ui': ['element-plus']
        }
      }
    }
  }
})

4.2 图片资源优化

// vite.config.ts
import imagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    imagemin({
      gifsicle: {
        optimizationLevel: 7
      },
      mozjpeg: {
        quality: 80
      },
      pngquant: {
        quality: [0.8, 0.9]
      }
    })
  ]
})

五、内存优化

5.1 及时清理事件监听

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'

const handler = () => {
  // 处理逻辑
}

onMounted(() => {
  window.addEventListener('scroll', handler)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handler)
})
</script>

5.2 清理定时器

<script setup lang="ts">
const timer = ref<number>()

onMounted(() => {
  timer.value = setInterval(() => {
    // 定时任务
  }, 1000)
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})
</script>

六、网络优化

6.1 接口数据缓存

const useDataCache = () => {
  const cache = new Map()
  
  const fetchWithCache = async (url: string) => {
    if (cache.has(url)) {
      return cache.get(url)
    }
    
    const data = await fetch(url).then(r => r.json())
    cache.set(url, data)
    return data
  }
  
  return { fetchWithCache }
}

6.2 防抖节流

import { debounce, throttle } from 'lodash-es'

// 搜索防抖
const handleSearch = debounce((keyword: string) => {
  // 搜索逻辑
}, 300)

// 滚动节流
const handleScroll = throttle(() => {
  // 滚动处理
}, 100)

七、性能监控

7.1 页面性能监控

const collectMetrics = () => {
  if (!window.performance) return
  
  const metrics = {
    // DNS 解析时间
    dns: performance.timing.domainLookupEnd - performance.timing.domainLookupStart,
    // TCP 连接时间
    tcp: performance.timing.connectEnd - performance.timing.connectStart,
    // 首屏时间
    fcp: performance.getEntriesByType('paint')[0].startTime,
    // DOM 解析时间
    dom: performance.timing.domComplete - performance.timing.domLoading
  }
  
  // 上报性能数据
  reportMetrics(metrics)
}

7.2 错误监控

const errorHandler = (error: Error) => {
  console.error(error)
  // 上报错误信息
  reportError({
    message: error.message,
    stack: error.stack,
    time: new Date().toISOString()
  })
}

app.config.errorHandler = errorHandler

八、最佳实践建议

1. 合理使用异步组件和路由懒加载
2. 避免不必要的组件重渲染
3. 大数据列表使用虚拟滚动
4. 及时清理副作用
5. 使用适当的缓存策略
6. 优化打包体积
7. 实施性能监控
8. 定期进行性能审查

参考资料

• Vue3 性能优化指南
• Vite 构建优化
• Web Vitals

---

💡 如果觉得本文对您有帮助，欢迎点赞收藏！

🔥 评论区可以提出您遇到的性能问题，我会持续更新优化方案。

#Vue3 #性能优化 #前端优化 #Web性能