Vue 3 项目的性能优化策略：从原理到实践

Vue 3 项目的性能优化策略：从原理到实践

1. 引言：性能优化的重要性与挑战

在现代前端开发中，性能优化已成为衡量应用质量的关键指标。随着 Vue 3 的普及，开发者不仅需要掌握其新特性，更需要了解如何充分发挥其性能潜力，构建响应迅速、体验流畅的应用。

Vue 3 本身通过响应式系统优化、编译优化等方式提升了基础性能，但实际项目中的性能表现还取决于开发者的架构设计、代码质量和优化策略。本文将从原理出发，结合实战案例，系统阐述 Vue 3 项目的性能优化策略，帮助开发者从"了解优化"过渡到"精通优化"。

2. 构建优化：从打包层面提升性能

2.1 Vite 配置优化

Vite 作为 Vue 3 的默认构建工具，其配置直接影响项目的构建性能和产物质量。

2.1.1 依赖预构建优化

// vite.config.ts - 依赖预构建优化配置
import { defineConfig } from 'vite' // 导入 Vite 配置函数
import vue from '@vitejs/plugin-vue' // 导入 Vue 插件

/**
 * Vite 配置对象
 * 优化依赖预构建过程
 */
export default defineConfig({
  // 插件配置
  plugins: [vue()], // 使用 Vue 插件
  
  // 依赖预构建配置
  optimizeDeps: {
    // 强制预构建的依赖：确保大型依赖被预构建
    include: ['lodash-es', 'echarts', 'ant-design-vue'],
    // 排除不需要预构建的依赖
    exclude: ['some-library'],
    // 自定义 esbuild 选项
    esbuildOptions: {
      target: 'es2015' // 目标 ES 版本，平衡兼容性和性能
    }
  }
})

/**
 * 优化原理：
 * 1. 依赖预构建：Vite 使用 esbuild 将 CommonJS 依赖转换为 ESM，并缓存构建结果
 * 2. include 配置：强制预构建大型依赖，避免首次访问时的构建延迟
 * 3. exclude 配置：排除不需要预构建的依赖，减少构建时间
 * 4. esbuild 优化：通过 target 配置平衡兼容性和性能
 */

原理与收益：

• 依赖预构建：Vite 使用 esbuild 将 CommonJS 依赖转换为 ESM，并缓存构建结果，减少开发时的重复转换
• include 配置：强制预构建大型依赖，避免首次访问时的构建延迟
• esbuild 优化：通过 target 配置平衡兼容性和性能

2.1.2 构建产物优化

// vite.config.ts - 构建产物优化配置
export default defineConfig({
  // 构建配置
  build: {
    // 代码压缩：使用 terser 进行高级压缩
    minify: 'terser',
    // Terser 配置
    terserOptions: {
      // 压缩配置
      compress: {
        drop_console: true, // 移除 console 语句
        drop_debugger: true // 移除 debugger 语句
      }
    },
    // 资源内联限制：小于 4KB 的资源将内联到 HTML 中
    assetsInlineLimit: 4096, // 4KB
    // CSS 代码分割：将 CSS 按路由分割
    cssCodeSplit: true,
    // 预加载配置：自动预加载
    preload: {
      include: 'auto'
    },
    // 代码分割配置
    rollupOptions: {
      // 输出配置
      output: {
        // 手动代码分割
        manualChunks: {
          // 第三方库
          vendor: ['vue', 'pinia', 'vue-router'],
          // UI 库
          ui: ['ant-design-vue'],
          // 图表库
          chart: ['echarts'],
          // 工具库
          utils: ['lodash-es', 'axios']
        }
      }
    }
  }
})

/**
 * 优化原理：
 * 1. 代码压缩：移除无用代码和调试信息，减小打包体积
 * 2. 资源内联：小体积资源内联到 HTML，减少 HTTP 请求
 * 3. CSS 代码分割：避免重复的 CSS 代码，减小样式文件体积
 * 4. 预加载：提前加载关键资源，提升用户体验
 * 5. 手动代码分割：将不同类型的依赖打包到不同 chunk，利用浏览器缓存
 */

原理与收益：

• 代码压缩：移除无用代码和调试信息，减小打包体积
• 资源内联：小体积资源内联到 HTML，减少 HTTP 请求
• CSS 代码分割：避免重复的 CSS 代码，减小样式文件体积
• 手动代码分割：将不同类型的依赖打包到不同 chunk，利用浏览器缓存

2.2 代码分割策略

2.2.1 路由级代码分割

// router/index.ts - 路由级代码分割配置
import { createRouter, createWebHistory } from 'vue-router' // 导入路由创建函数

/**
 * 创建路由实例
 * 使用动态导入实现路由级代码分割
 */
const router = createRouter({
  // 使用 HTML5 History 模式
  history: createWebHistory(),
  // 路由配置
  routes: [
    {
      path: '/',
      // 动态导入首页组件：按需加载
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/dashboard',
      // 动态导入仪表盘组件：按需加载
      component: () => import('@/views/Dashboard.vue')
    },
    {
      path: '/admin',
      // 动态导入管理员组件：按需加载
      component: () => import('@/views/Admin.vue')
    }
  ]
})

/**
 * 优化原理：
 * 1. 按需加载：路由组件仅在访问时加载，减少首屏加载体积
 * 2. 并行加载：浏览器可以并行加载多个路由 chunk，提升加载速度
 * 3. 代码分割：每个路由生成独立的 chunk，利用浏览器缓存
 */

原理与收益：

• 按需加载：路由组件仅在访问时加载，减少首屏加载体积
• 并行加载：浏览器可以并行加载多个路由 chunk，提升加载速度

2.2.2 组件级代码分割

<template>
  <div>
    <h1>首页</h1>
    <button @click="showHeavyComponent = true">显示重型组件</button>
    <HeavyComponent v-if="showHeavyComponent" />
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue' // 导入响应式 API

// 控制重型组件显示的响应式状态
const showHeavyComponent = ref(false)

/**
 * 异步加载重型组件
 * 配置加载状态和错误处理
 */
const HeavyComponent = defineAsyncComponent({
  // 加载器：动态导入重型组件
  loader: () => import('@/components/HeavyComponent.vue'),
  // 加载中组件：显示加载状态
  loadingComponent: () => import('@/components/Loading.vue'),
  // 错误组件：显示加载错误
  errorComponent: () => import('@/components/Error.vue'),
  // 延迟显示加载组件：200ms
  delay: 200,
  // 超时时间：3000ms
  timeout: 3000
})
</script>

/**
 * 优化原理：
 * 1. 条件加载：仅在需要时加载重型组件，减少初始加载时间
 * 2. 异步组件：使用 defineAsyncComponent 实现组件的按需加载
 * 3. 加载状态管理：配置加载中和错误组件，提升用户体验
 * 4. 延迟加载：通过 delay 配置避免频繁显示加载组件
 */

原理与收益：

• 条件加载：仅在需要时加载重型组件，减少初始加载时间
• 加载状态：提供加载和错误组件，提升用户体验

2.3 Tree-shaking 优化

// Tree-shaking 优化示例

// 优化前：导入整个库（未使用的代码会被打包）
import _ from 'lodash'
const result = _.debounce(() => {}, 300)

// 优化后：按需导入（仅导入使用的函数）
import { debounce } from 'lodash-es'
const result = debounce(() => {}, 300)

// 或者使用 webpack 魔法注释（进一步优化）
import('lodash-es/debounce')

/**
 * 优化原理：
 * 1. Tree-shaking：移除未使用的代码，减小打包体积
 * 2. 按需导入：仅导入需要的函数或组件，避免全量导入
 * 3. ESM 模块：使用 ES 模块语法，便于 Tree-shaking
 * 4. 魔法注释：提供额外的打包优化信息
 */

原理与收益：

• Tree-shaking：移除未使用的代码，减小打包体积
• 按需导入：仅导入需要的函数或组件，避免全量导入

3. 响应式系统优化：充分利用 Vue 3 的响应式特性

3.1 ref 与 reactive 的合理选择

// 响应式 API 使用最佳实践

/**
 * 基本类型使用 ref
 * 适合：数字、字符串、布尔值等基本类型
 */
const count = ref(0)

/**
 * 对象类型使用 reactive
 * 适合：需要响应式的对象类型
 */
const user = reactive({
  name: 'John',
  age: 30
})

/**
 * 复杂对象考虑使用 shallowReactive
 * 适合：深层嵌套对象，只需要顶层属性响应式的场景
 */
const complexObject = shallowReactive({
  // 深层嵌套对象：不会被响应式处理
  deep: {
    nested: {
      data: {}
    }
  }
})

/**
 * 优化原理：
 * 1. ref 优势：基本类型的响应式包装，访问和修改简单（.value）
 * 2. reactive 优势：对象类型的响应式代理，无需 .value 访问
 * 3. shallowReactive 优势：仅对顶层属性响应式，适合深层嵌套对象，减少响应式开销
 */

原理与收益：

• ref 优势：基本类型的响应式包装，访问和修改简单（.value）
• reactive 优势：对象类型的响应式代理，无需 .value 访问
• shallowReactive 优势：仅对顶层属性响应式，适合深层嵌套对象，减少响应式开销

3.2 避免响应式陷阱

3.2.1 避免直接修改响应式对象

// 响应式对象的引用陷阱

/**
 * 陷阱 1：直接替换响应式对象
 * 问题：失去响应式
 */
const user = reactive({ name: 'John' })
user = { name: 'Jane' } // 错误：失去响应式

/**
 * 解决方案 1：修改属性而非替换对象
 * 优点：保持响应式
 */
const user = reactive({ name: 'John' })
user.name = 'Jane' // 正确：保持响应式

/**
 * 解决方案 2：使用 ref 包装
 * 优点：可以直接替换值，保持响应式
 */
const user = ref({ name: 'John' })
user.value = { name: 'Jane' } // 正确：保持响应式

/**
 * 优化原理：
 * 1. reactive 返回的是对象的 Proxy 实例，直接替换整个对象会导致引用指向原始对象
 * 2. 修改属性时，Proxy 会拦截并保持响应式
 * 3. ref 通过 .value 访问，替换 value 时会触发响应式更新
 */

3.2.2 避免响应式对象的解构赋值

// 响应式对象的解构赋值陷阱

/**
 * 陷阱：解构赋值失去响应式
 * 问题：解构后的变量不再是响应式
 */
const user = reactive({ name: 'John' })
const { name } = user // 错误：name 不再是响应式

/**
 * 解决方案 1：使用 toRefs 保持响应式
 * 优点：解构后的变量仍然是响应式
 */
import { toRefs } from 'vue'
const user = reactive({ name: 'John' })
const { name } = toRefs(user) // 正确：name 保持响应式

/**
 * 解决方案 2：使用 computed
 * 优点：创建响应式计算属性
 */
import { computed } from 'vue'
const userName = computed(() => user.name) // 正确：保持响应式

/**
 * 优化原理：
 * 1. 解构赋值会提取对象的原始值，这些值不再与响应式代理关联
 * 2. toRefs 将 reactive 对象的每个属性转换为 ref，保持响应式
 * 3. computed 创建基于依赖的计算属性，保持响应式
 */

3.3 高级响应式 API 的使用

3.3.1 使用 shallowRef 处理大型对象

import { shallowRef, triggerRef } from 'vue' // 导入高级响应式 API

/**
 * 大型对象使用 shallowRef
 * 适合：大型数组、深层嵌套对象等
 * 优势：仅对 .value 的访问响应式，减少响应式开销
 */
const largeList = shallowRef([])

/**
 * 批量更新大型列表
 * @param newData 新数据
 */
function updateLargeList(newData) {
  // 直接替换值
  largeList.value = newData
  // 手动触发响应式更新：因为是 shallowRef，需要手动触发
  triggerRef(largeList)
}

/**
 * 优化原理：
 * 1. shallowRef 仅对 .value 的访问响应式，适合大型对象，减少响应式开销
 * 2. triggerRef 手动触发响应式更新，避免自动响应式带来的性能损耗
 * 3. 批量更新后手动触发，减少频繁更新带来的性能问题
 */

原理与收益：

• shallowRef：仅对 .value 的访问响应式，适合大型对象，减少响应式开销
• triggerRef：手动触发响应式更新，避免自动响应式带来的性能损耗

3.3.2 使用 markRaw 标记非响应式对象

import { markRaw } from 'vue' // 导入高级响应式 API

/**
 * 第三方库实例标记为非响应式
 * 适合：第三方库实例、不需要响应式的对象
 * 优势：避免 Vue 为其创建响应式代理，提升性能
 */
const chartInstance = markRaw(new Chart()) // 正确：标记为非响应式

/**
 * 常量数据标记为非响应式
 * 适合：不会变化的数据、配置对象等
 * 优势：减少内存占用，提升初始化速度
 */
const constantData = markRaw({
  // 不会变化的数据
})

/**
 * 优化原理：
 * 1. markRaw 标记对象为非响应式，避免 Vue 为其创建响应式代理
 * 2. 性能提升：减少内存占用，提升初始化速度
 * 3. 适用场景：第三方库实例、常量数据、配置对象等不需要响应式的数据
 */

原理与收益：

• markRaw：标记对象为非响应式，避免 Vue 为其创建响应式代理
• 性能提升：减少内存占用，提升初始化速度

4. 渲染优化：提升组件渲染性能

4.1 模板指令优化

4.1.1 使用 v-memo 缓存渲染结果

<template>
  <div>
    <h1>商品列表</h1>
    <ul>
      <!-- 使用 v-memo 缓存渲染结果 -->
      <!-- 依赖项: [item.price, item.stock]，仅当这些值变化时重新渲染 -->
      <li v-for="item in items" :key="item.id" v-memo="[item.price, item.stock]">
        <h3>{{ item.name }}</h3>
        <p>价格: {{ item.price }}</p>
        <p>库存: {{ item.stock }}</p>
        <!-- 复杂计算：依赖 price 和 stock -->
        <p>折扣: {{ calculateDiscount(item.price, item.stock) }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue' // 导入响应式 API

// 商品列表数据
const items = ref([
  { id: 1, name: '商品1', price: 100, stock: 50 },
  { id: 2, name: '商品2', price: 200, stock: 30 },
  { id: 3, name: '商品3', price: 150, stock: 20 }
])

/**
 * 计算折扣
 * 复杂的折扣计算逻辑
 * @param price 价格
 * @param stock 库存
 * @returns 折扣后价格
 */
const calculateDiscount = (price, stock) => {
  // 复杂的折扣计算逻辑
  return stock > 40 ? price * 0.9 : price
}
</script>

/**
 * 优化原理：
 * 1. v-memo：缓存模板表达式的结果，仅当依赖项变化时重新渲染
 * 2. 性能提升：避免重复计算，适合渲染大量列表项或复杂计算
 * 3. 依赖数组：明确指定依赖项，精确控制重新渲染的时机
 */

原理与收益：

• v-memo：缓存模板表达式的结果，仅当依赖项变化时重新渲染
• 性能提升：避免重复计算，适合渲染大量列表项或复杂计算

4.1.2 使用 v-once 渲染静态内容

<template>
  <div>
    <!-- 静态内容使用 v-once -->
    <!-- v-once：仅渲染一次，后续更新时跳过 -->
    <div v-once>
      <h1>网站标题</h1>
      <p>这是一段静态文本，不会变化</p>
    </div>
    
    <!-- 动态内容 -->
    <div>
      <p>计数器: {{ count }}</p>
      <button @click="count++">增加</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue' // 导入响应式 API

// 动态计数器
const count = ref(0)
</script>

/**
 * 优化原理：
 * 1. v-once：仅渲染一次，后续更新时跳过
 * 2. 性能提升：减少静态内容的渲染开销
 * 3. 适用场景：网站标题、固定文本等不会变化的内容
 */

原理与收益：

• v-once：仅渲染一次，后续更新时跳过
• 性能提升：减少静态内容的渲染开销

4.2 计算属性与监听器优化

4.2.1 合理使用 computed 缓存计算结果

// 计算属性优化示例

/**
 * 优化前：每次访问都会重新计算
 * 问题：重复计算，影响性能
 */
function getFullName() {
  return `${firstName.value} ${lastName.value}`
}

/**
 * 优化后：使用 computed 缓存计算结果
 * 优点：依赖不变时直接返回缓存值
 */
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})

/**
 * 优化原理：
 * 1. computed：基于依赖缓存计算结果，依赖不变时直接返回缓存值
 * 2. 性能提升：避免重复计算，适合复杂计算场景
 * 3. 响应式：自动追踪依赖变化，当依赖变化时重新计算
 */

原理与收益：

• computed：基于依赖缓存计算结果，依赖不变时直接返回缓存值
• 性能提升：避免重复计算，适合复杂计算场景

4.2.2 监听器的优化

// 监听器优化示例

/**
 * 优化前：深度监听整个对象
 * 问题：性能开销大，所有属性变化都会触发
 */
watch(user, (newVal) => {
  console.log('User changed:', newVal)
}, { deep: true })

/**
 * 优化后：监听特定属性
 * 优点：精确监听，性能开销小
 */
watch(() => user.name, (newVal) => {
  console.log('User name changed:', newVal)
})

/**
 * 或者使用 watchEffect
 * 优点：自动追踪依赖，代码更简洁
 */
watchEffect(() => {
  console.log('User name:', user.name)
})

/**
 * 优化原理：
 * 1. 精确监听：仅监听需要变化的属性，避免深度监听带来的性能开销
 * 2. watchEffect：自动追踪依赖，代码更简洁
 * 3. 性能提升：减少不必要的监听器触发，提升应用响应速度
 */

原理与收益：

• 精确监听：仅监听需要变化的属性，避免深度监听带来的性能开销
• watchEffect：自动追踪依赖，代码更简洁

4.3 组件优化策略

4.3.1 合理使用组件拆分

<!-- 父组件 -->
<template>
  <div>
    <h1>用户管理</h1>
    <!-- 拆分出用户列表组件 -->
    <UserList :users="users" />
    <!-- 拆分出用户表单组件 -->
    <UserForm @submit="addUser" />
  </div>
</template>

<!-- 子组件：UserList.vue -->
<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

<script setup lang="ts">
defineProps<{
  users: { id: number; name: string }[]
}>()
</script>

原理与收益：

• 组件拆分：将复杂组件拆分为更小的、职责单一的组件
• 性能提升：减少单个组件的渲染开销，提高复用性

4.3.2 使用 defineAsyncComponent 异步加载组件

import { defineAsyncComponent } from 'vue'

// 异步加载重型组件
const HeavyChart = defineAsyncComponent({
  loader: () => import('@/components/HeavyChart.vue'),
  loadingComponent: () => import('@/components/Loading.vue'),
  errorComponent: () => import('@/components/Error.vue'),
  delay: 200,
  timeout: 3000
})

原理与收益：

• 异步加载：组件仅在需要时加载，减少初始包体积
• 加载状态：提供加载和错误状态，提升用户体验

5. 网络优化：提升数据加载性能

5.1 API 请求优化

5.1.1 使用 axios 拦截器和缓存

// utils/http.ts
import axios from 'axios'

const http = axios.create({
  baseURL: '/api',
  timeout: 10000
})

// 请求缓存
const cache = new Map()

// 请求拦截器
http.interceptors.request.use(
  config => {
    // 添加缓存逻辑
    if (config.method === 'get') {
      const cacheKey = config.url + JSON.stringify(config.params)
      if (cache.has(cacheKey)) {
        return Promise.resolve({ data: cache.get(cacheKey) })
      }
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
http.interceptors.response.use(
  response => {
    // 缓存 GET 请求结果
    if (response.config.method === 'get') {
      const cacheKey = response.config.url + JSON.stringify(response.config.params)
      cache.set(cacheKey, response.data)
    }
    return response
  },
  error => {
    return Promise.reject(error)
  }
)

export default http

原理与收益：

• 请求缓存：缓存 GET 请求结果，避免重复请求
• 拦截器：统一处理请求和响应，减少重复代码

5.1.2 防抖和节流

// composables/useDebounce.ts
import { ref, watch } from 'vue'

export function useDebounce<T>(value: T, delay: number = 300) {
  const debouncedValue = ref(value as T)
  let timeout: ReturnType<typeof setTimeout>

  watch(() => value, (newValue) => {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      debouncedValue.value = newValue
    }, delay)
  })

  return debouncedValue
}

// 使用示例
const searchQuery = ref('')
const debouncedQuery = useDebounce(searchQuery, 500)

watch(debouncedQuery, (query) => {
  // 发起搜索请求
  searchUsers(query)
})

原理与收益：

• 防抖：延迟执行，避免频繁触发（如搜索输入）
• 节流：限制执行频率，避免过度执行（如滚动事件）

5.2 资源加载优化

5.2.1 图片优化

<template>
  <div>
    <!-- 使用 WebP 格式图片 -->
    <picture>
      <source srcset="image.webp" type="image/webp">
      <img src="image.jpg" alt="Image">
    </picture>
    
    <!-- 图片懒加载 -->
    <img v-lazy="image.url" alt="Lazy Image">
  </div>
</template>

<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core'

// 自定义图片懒加载逻辑
const { stop, isIntersecting } = useIntersectionObserver(
  imgRef,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      imgRef.value.src = image.url
      stop()
    }
  }
)
</script>

原理与收益：

• WebP 格式：更小的文件体积，更快的加载速度
• 图片懒加载：仅在视口内加载图片，减少初始加载时间

5.2.2 预加载和预连接

<template>
  <div>
    <!-- 预连接 -->
    <link rel="preconnect" href="https://api.example.com">
    <!-- 预加载 -->
    <link rel="preload" href="/api/data" as="fetch">
    <!-- 预加载字体 -->
    <link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
  </div>
</template>

<script setup lang="ts">
// 组件挂载后预加载数据
import { onMounted } from 'vue'

onMounted(() => {
  // 预加载可能需要的数据
  fetch('/api/data', {
    method: 'GET',
    credentials: 'same-origin'
  })
    .then(response => response.json())
    .then(data => {
      // 缓存数据
      window.__preloadedData = data
    })
})
</script>

原理与收益：

• 预连接：提前建立与服务器的连接，减少后续请求的延迟
• 预加载：提前加载关键资源，提升用户体验

6. 状态管理优化：Pinia 的性能最佳实践

6.1 Pinia store 设计优化

// stores/user.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  // 状态
  const users = ref([])
  const loading = ref(false)
  
  // 计算属性
  const activeUsers = computed(() => {
    return users.value.filter(user => user.active)
  })
  
  // 动作
  async function fetchUsers() {
    loading.value = true
    try {
      const response = await fetch('/api/users')
      users.value = await response.json()
    } catch (error) {
      console.error('Failed to fetch users:', error)
    } finally {
      loading.value = false
    }
  }
  
  return {
    users,
    loading,
    activeUsers,
    fetchUsers
  }
})

原理与收益：

• 组合式 API 风格：更灵活的 store 定义，逻辑更清晰
• 计算属性缓存：避免重复计算，提升性能
• 异步动作：直接在 action 中处理异步逻辑，代码更简洁

6.2 Pinia 性能优化策略

6.2.1 使用持久化存储

# 安装插件
npm install pinia-plugin-persistedstate

// stores/index.ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

// stores/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  // ...
  persist: {
    key: 'user-storage',
    storage: localStorage,
    paths: ['user.name', 'user.age'] // 仅持久化特定字段
  }
})

原理与收益：

• 持久化存储：将状态保存到 localStorage/sessionStorage，避免重复请求
• 性能提升：减少初始加载时的 API 请求，提升用户体验

6.2.2 模块化 store 设计

stores/
├── index.ts          # Pinia 实例
├── user.ts           # 用户 store
├── product.ts        # 产品 store
├── order.ts          # 订单 store
└── common.ts         # 通用 store

原理与收益：

• 模块化：按功能划分 store，职责单一
• 性能提升：减少单个 store 的体积，提升访问速度

7. 运行时优化：提升应用运行性能

7.1 事件处理优化

7.1.1 使用事件委托

<template>
  <div @click="handleClick" class="list-container">
    <div v-for="item in items" :key="item.id" :data-id="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
])

function handleClick(event: MouseEvent) {
  const target = event.target as HTMLElement
  const itemId = target.dataset.id
  if (itemId) {
    console.log('Item clicked:', itemId)
  }
}
</script>

原理与收益：

• 事件委托：将事件监听器绑定到父元素，避免为每个子元素绑定
• 性能提升：减少事件监听器数量，提升内存使用效率

7.1.2 清理事件监听器

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

function handleResize() {
  // 处理 resize 事件
}

原理与收益：

• 清理事件监听器：组件卸载时移除事件监听器，避免内存泄漏
• 性能提升：减少不必要的事件处理，提升应用稳定性

7.2 内存优化

7.2.1 避免内存泄漏

// 优化前：未清理定时器
import { onMounted } from 'vue'

onMounted(() => {
  setInterval(() => {
    // 定期执行任务
  }, 1000)
})

// 优化后：清理定时器
import { onMounted, onUnmounted } from 'vue'

let timer: ReturnType<typeof setInterval>

onMounted(() => {
  timer = setInterval(() => {
    // 定期执行任务
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})

原理与收益：

• 清理定时器：组件卸载时清除定时器，避免内存泄漏
• 性能提升：减少后台运行的任务，提升应用响应速度

7.2.2 合理使用 WeakMap 和 WeakSet

// 使用 WeakMap 存储临时数据
const cache = new WeakMap()

function processObject(obj: object) {
  if (cache.has(obj)) {
    return cache.get(obj)
  }
  
  const result = // 处理逻辑
  cache.set(obj, result)
  return result
}

原理与收益：

• WeakMap/WeakSet：弱引用，对象被垃圾回收时自动移除
• 性能提升：减少内存占用，避免内存泄漏

8. 性能监控与分析：持续优化的关键

8.1 性能监控工具

8.1.1 使用 Vue DevTools

Vue DevTools 提供了性能分析工具，可以帮助开发者：

• 组件渲染时间：分析每个组件的渲染时间
• 响应式数据追踪：查看响应式数据的依赖关系
• 性能时间线：追踪组件的生命周期和更新

8.1.2 使用 Web Vitals

// 安装依赖
npm install web-vitals

// 监控性能指标
import { onCLS, onFID, onLCP, onTTFB } from 'web-vitals'

onCLS(console.log) // 累积布局偏移
onFID(console.log) // 首次输入延迟
onLCP(console.log) // 最大内容绘制
onTTFB(console.log) // 首字节时间

原理与收益：

• Web Vitals：Google 推荐的用户体验核心指标
• 数据驱动：基于实际用户数据优化性能

8.2 性能分析工具

8.2.1 使用 Vite 构建分析

// vite.config.ts
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    // ...
    visualizer({
      open: true,
      filename: 'dist/stats.html'
    })
  ]
})

原理与收益：

• 构建分析：生成构建产物的可视化分析报告
• 优化方向：识别大型依赖和未使用的代码

8.2.2 使用 Chrome DevTools

Chrome DevTools 提供了强大的性能分析工具：

• Performance：分析运行时性能，查看 JavaScript 执行时间
• Memory：分析内存使用情况，识别内存泄漏
• Network：分析网络请求，优化资源加载

9. 实战案例：从 3 秒到 1 秒的性能优化之旅

9.1 项目背景

某电商后台管理系统，基于 Vue 3 + Pinia + Vite 构建，初始加载时间约 3 秒，用户体验较差。

9.2 性能瓶颈分析

通过 Chrome DevTools 和 Vite 构建分析，识别出以下瓶颈：

1. 构建产物过大：未优化的第三方依赖（如 echarts、ant-design-vue）
2. 响应式开销：深层嵌套对象的响应式代理
3. 渲染性能：大量列表项的重复渲染
4. 网络请求：未缓存的 API 请求

9.3 优化策略实施

9.3.1 构建优化

• 代码分割：按需加载路由和组件
• 依赖优化：按需引入 ant-design-vue，使用 echarts 的按需导入
• 构建配置：优化 Vite 配置，减小打包体积

9.3.2 响应式优化

• 合理使用 shallowRef：处理深层嵌套对象
• 避免直接修改：使用正确的响应式 API
• markRaw：标记非响应式对象

9.3.3 渲染优化

• v-memo：缓存列表项渲染结果
• 组件拆分：将大型组件拆分为更小的组件
• 计算属性：缓存复杂计算结果

9.3.4 网络优化

• 缓存策略：使用 Pinia 持久化存储
• 防抖节流：优化搜索和滚动事件
• 图片优化：使用 WebP 格式和懒加载

9.4 优化效果

指标	优化前	优化后	提升比例
首屏加载时间	3.2s	1.1s	65.6%
构建产物大小	2.1MB	850KB	59.5%
组件渲染时间	120ms	45ms	62.5%
内存占用	45MB	28MB	37.8%

10. 最佳实践总结：Vue 3 性能优化清单

10.1 构建层面

• 优化 Vite 配置（依赖预构建、代码分割）
• 按需引入第三方库
• 使用 Tree-shaking 移除未使用代码
• 优化构建产物（压缩、资源内联）

10.2 响应式系统层面

• 合理选择 ref 与 reactive
• 避免响应式陷阱（直接修改、解构赋值）
• 使用 shallowRef、shallowReactive 处理大型对象
• 使用 markRaw 标记非响应式对象

10.3 渲染层面

• 使用 v-memo 缓存渲染结果
• 使用 v-once 渲染静态内容
• 合理使用 computed 缓存计算结果
• 优化监听器（精确监听、避免深度监听）
• 组件拆分与异步加载

10.4 网络层面

• 实现请求缓存
• 使用防抖节流优化事件处理
• 图片优化（WebP、懒加载）
• 预加载和预连接

10.5 状态管理层面

• 模块化 store 设计
• 使用持久化存储
• 合理使用计算属性

10.6 运行时层面

• 使用事件委托
• 清理事件监听器和定时器
• 合理使用 WeakMap 和 WeakSet

10.7 监控与分析层面

• 使用 Vue DevTools 分析性能
• 集成 Web Vitals 监控用户体验
• 使用构建分析工具识别瓶颈

11. 结论：性能优化是一个持续的过程

Vue 3 为前端性能优化提供了强大的工具和特性，但真正的性能优化需要开发者在实际项目中根据具体情况选择合适的策略。从构建优化到运行时优化，从响应式系统到渲染层面，每个环节都有优化的空间。

性能优化不是一蹴而就的，而是一个持续迭代的过程。通过本文介绍的策略和工具，开发者可以系统地提升 Vue 3 应用的性能，为用户提供更流畅、更响应迅速的体验。

记住，性能优化的终极目标是提升用户体验，而不是追求纯粹的技术指标。在优化过程中，要始终以用户为中心，根据实际用户数据和反馈调整优化策略，才能真正构建出高性能的 Vue 3 应用。