Vue大型项目性能优化策略

大型Vue项目需系统化优化性能瓶颈，下面梳理核心优化策略。

组件渲染优化

v-show vs v-if

<!-- 频繁切换使用v-show -->
<div v-show="isVisible">内容</div>

<!-- 条件很少改变使用v-if -->
<div v-if="userRole === 'admin'">管理面板</div>

避免不必要的响应式

// 使用shallowRef/shallowReactive减少响应式开销
import { shallowRef, shallowReactive } from 'vue'

// 大型列表不需要响应式
const largeData = shallowRef(generateLargeArray())

// 仅顶层属性响应式
const config = shallowReactive({
  theme: 'light',
  locale: 'zh-CN'
})

列表优化

虚拟滚动实现

<script setup>
import { computed } from 'vue'

const props = defineProps({
  items: Array,
  itemHeight: { type: Number, default: 50 }
})

const visibleCount = computed(() => 
  Math.ceil(containerHeight.value / props.itemHeight)
)

const visibleItems = computed(() => {
  const start = scrollTop.value / props.itemHeight
  const end = start + visibleCount.value
  return props.items.slice(start, end)
})
</script>

<template>
  <div class="virtual-list" :style="{ height: `${items.length * itemHeight}px` }">
    <div class="list-content" :style="{ transform: `translateY(${scrollTop}px)` }">
      <div v-for="item in visibleItems" :key="item.id" class="list-item">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

路由懒加载优化

组件分块加载

// 路由配置
const routes = [
  {
    path: '/dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ '@/views/dashboard/index.vue')
  },
  {
    path: '/user',
    component: () => import(/* webpackChunkName: "user" */ '@/views/user/index.vue')
  }
]

图片优化

懒加载与占位

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({ src: String, alt: String })
const isLoaded = ref(false)
const imgSrc = ref('placeholder.jpg')

onMounted(() => {
  const img = new Image()
  img.onload = () => {
    imgSrc.value = props.src
    isLoaded.value = true
  }
  img.src = props.src
})
</script>

<template>
  <img :src="imgSrc" :alt="alt" :class="{ loaded: isLoaded }" loading="lazy" />
</template>

打包优化配置

Vite配置示例

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          ui: ['element-plus'],
          utils: ['lodash-es', 'dayjs']
        }
      }
    },
    chunkSizeWarningLimit: 1000,
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})

缓存策略

HTTP缓存与组件缓存

// 路由keepAlive配置
{
  path: '/user',
  component: () => import('@/views/user/index.vue'),
  meta: { keepAlive: true }
}

// App.vue中使用keep-alive
<router-view v-slot="{ Component }">
  <keep-alive :include="['UserList', 'OrderList']" :max="10">
    <component :is="Component" />
  </keep-alive>
</router-view>

优化指标对比

要点总结

• 使用shallowRef/shallowReactive减少不必要的响应式开销
• 大型列表采用虚拟滚动，只渲染可视区域
• 路由配置懒加载，配合分块打包减少首屏体积
• 图片使用懒加载与占位策略
• Vite配置manualChunks拆分第三方依赖
• 合理使用keep-alive缓存高频页面

存放路径: articles/VUE/专家/大型项目架构分层设计/性能优化策略.md