一、开发环境优化：提速启动与热更新，告别等待

1. 合理配置Vite优化选项

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置路径别名，减少查找时间
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    // 限定扩展名，提升解析效率
    extensions: ['.vue', '.js', '.ts', '.json']
  },
  // 优化依赖预构建
  optimizeDeps: {
    // 强制预构建指定依赖
    include: ['axios', 'vue-router', 'pinia'],
    // 排除无需预构建的依赖
    exclude: ['some-large-lib']
  },
  // 关闭不必要的功能
  server: {
    open: false, // 关闭自动打开浏览器
    cors: true // 允许跨域，避免开发时频繁配置
  }
})

2. 禁用 sourcemap：开发环境编译速度翻倍

// vite.config.js
export default defineConfig({
  build: {
    sourcemap: process.env.NODE_ENV === 'production' // 生产环境开启sourcemap
  },
  server: {
    sourcemap: false // 开发环境禁用sourcemap
  }
})

二、生产构建优化：精简打包体积，提升首屏加载速度

1. 按需引入依赖与组件

• Element Plus：使用 unplugin-vue-components 插件自动按需引入；

• 工具库：如lodash，使用 lodash-es 配合Tree Shaking，仅引入使用的函数。

// 安装插件
npm install unplugin-vue-components unplugin-auto-import -D

// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

2. 图片与资源优化：减少请求数，压缩资源体积

// vite.config.js
export default defineConfig({
  build: {
    assetsInlineLimit: 4096, // 小于4KB的资源内联为Base64，减少请求数
    rollupOptions: {
      output: {
        // 资源分类打包
        assetFileNames: {
          images: 'assets/images/[name]-[hash].[ext]',
          css: 'assets/css/[name]-[hash].css'
        }
      }
    }
  },
  // 配置图片压缩（需安装vite-plugin-imagemin）
  plugins: [
    imagemin({
      gifsicle: { optimizationLevel: 7, interlaced: false },
      optipng: { enabled: false },
      pngquant: { quality: [0.6, 0.8] },
      svgo: { plugins: [{ name: 'removeViewBox', active: false }] }
    })
  ]
})

3. 代码分割与懒加载：按需加载，降低首屏压力

// 路由懒加载（router/index.js）
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/home',
    name: 'Home',
    // 懒加载组件
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/detail',
    name: 'Detail',
    component: () => import('@/views/Detail.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

三、运行时优化：优化响应式与 DOM 操作，提升页面流畅度

1. 优化Vue响应式性能

• 使用 shallowRef 和 shallowReactive 替代深层响应式，减少Proxy代理开销；

• 对于列表渲染，使用 v-memo 缓存组件，避免不必要的重渲染。

<!-- 列表渲染优化 -->
<template>
  <div v-for="item in list" :key="item.id" v-memo="[item.id, item.name]">
    {{ item.name }}
  </div>
</template>

2. 减少 DOM 操作：避免频繁重排重绘

• 将复杂逻辑抽离到计算属性或方法中，缓存计算结果；

• 使用 teleport 优化模态框等组件的DOM结构。

结语