Vite 打包慢？原因分析与优化实战指南

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    // 强制预构建某些依赖
    include: [
      'vue',
      'vue-router',
      'pinia',
      'axios',
      // 嵌套依赖也需要显式声明
      'element-plus/es/components/button/style/css',
    ],
    // 排除不需要预构建的依赖
    exclude: ['your-local-package'],
  },
})

// vite.config.ts
export default defineConfig({
  build: {
    commonjsOptions: {
      // 优化 CJS 转换
      transformMixedEsModules: true,
      // 忽略不需要转换的依赖
      ignore: ['some-cjs-only-package'],
    },
  },
})

// vite.config.ts
export default defineConfig({
  esbuild: {
    // 使用 esbuild 进行 TS 转换（默认）
    target: 'es2020',
    // 跳过类型检查（类型检查应该在 CI 中单独执行）
    tsconfigRaw: {
      compilerOptions: {
        // 禁用装饰器元数据（如果不需要）
        emitDecoratorMetadata: false,
      },
    },
  },
})

// vite.config.ts
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      // 使用 SWC 替代 Babel（更快）
      // jsxRuntime: 'automatic',
      babel: {
        // 减少 Babel 插件数量
        plugins: [],
        // 排除 node_modules
        exclude: /node_modules/,
      },
    }),
  ],
})

// vite.config.ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 减少 @import 的使用，改用 @use
        additionalData: `@use "@/styles/variables" as *;`,
        // 使用 dart-sass 的现代 API
        api: 'modern-compiler',
      },
      less: {
        // 启用 JavaScript（仅在需要时）
        javascriptEnabled: true,
      },
    },
    // 开启 CSS 模块的本地作用域
    modules: {
      localsConvention: 'camelCase',
    },
  },
})

// vite.config.ts
export default defineConfig({
  plugins: [
    // ❌ 错误：每个文件都会触发
    myHeavyPlugin(),
    
    // ✅ 正确：限制插件作用范围
    {
      ...myHeavyPlugin(),
      apply: 'build', // 仅在构建时生效
      enforce: 'post', // 最后执行
    },
  ],
})

// vite.config.ts
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 限制扫描目录
      dirs: ['src/components'],
      // 排除不需要自动导入的组件
      exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/],
      // 开启类型声明
      dts: true,
    }),
  ],
})

// vite.config.ts
export default defineConfig({
  build: {
    // 生产环境禁用 source map（最快）
    sourcemap: false,
    
    // 或使用 'hidden'（生成但不引用）
    // sourcemap: 'hidden',
    
    // 或使用 esbuild 生成（较快）
    // sourcemap: true,
  },
})

// vite.config.ts
export default defineConfig({
  build: {
    // 使用 esbuild 压缩（默认，最快）
    minify: 'esbuild',
    
    // 或使用 terser（更小但更慢）
    // minify: 'terser',
    // terserOptions: {
    //   compress: {
    //     drop_console: true,
    //     drop_debugger: true,
    //   },
    // },
  },
})

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 手动分割代码块
        manualChunks: {
          // 将大型库单独打包
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'ui-vendor': ['element-plus'],
          'utils-vendor': ['lodash-es', 'dayjs'],
        },
        
        // 或使用函数动态分割
        // manualChunks(id) {
        //   if (id.includes('node_modules')) {
        //     return 'vendor'
        //   }
        // },
      },
    },
  },
})

// vite.config.ts
import circleDependency from 'vite-plugin-circular-dependency'

export default defineConfig({
  plugins: [
    circleDependency({
      // 检测循环依赖
      circleImportThrowErr: false, // 警告而非报错
    }),
  ],
})

// vite.config.ts
export default defineConfig({
  cacheDir: '.vite', // 使用 SSD 目录作为缓存
  build: {
    // 减少写入操作
    write: true,
  },
})

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

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

// vite.config.ts
import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [
    Inspect({
      build: true,
      outputDir: '.vite-inspect',
    }),
  ],
})

// scripts/analyze-build.ts
import { performance } from 'node:perf_hooks'
import { build } from 'vite'

async function analyzeBuild() {
  const start = performance.now()
  
  await build({
    configFile: './vite.config.ts',
    logLevel: 'info',
  })
  
  const duration = performance.now() - start
  console.log(`构建耗时: ${(duration / 1000).toFixed(2)}s`)
}

analyzeBuild()

// vite.config.ts
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()],
    }),
  ],
})

// vite.config.ts
import { defineConfig } from 'vite'
import { viteExternalsPlugin } from 'vite-plugin-externals'

export default defineConfig({
  plugins: [
    viteExternalsPlugin({
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios',
    }),
  ],
})

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    // 强制预构建
    include: [
      'vue',
      'vue-router',
      'pinia',
      '@vueuse/core',
      'element-plus/es',
      // 深层依赖
      'element-plus > @ctrl/tinycolor',
    ],
    // 使用 esbuild 进行预构建
    esbuildOptions: {
      target: 'es2020',
    },
  },
})

// vite.config.ts（Vite 4.x+）
export default defineConfig({
  build: {
    // 实验性：开启构建缓存（Vite 6+）
    // cache: true,
  },
})

// vite.config.ts
export default defineConfig({
  build: {
    minify: 'esbuild',
    target: 'es2020',
  },
  esbuild: {
    drop: ['console', 'debugger'], // 移除 console 和 debugger
    legalComments: 'none', // 移除注释
  },
})

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      // 减少解析时间
      treeshake: {
        preset: 'recommended',
        moduleSideEffects: 'no-external',
      },
      // 输出优化
      output: {
        // 使用更高效的 chunk 命名
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]',
        // 合并小 chunk
        experimentalMinChunkSize: 10 * 1024, // 10KB
      },
    },
  },
})

// router/index.ts
const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue'),
  },
  // 使用命名 chunk（Vite 使用 Rollup，注释格式不同）
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'), // Vite 会自动根据文件名生成 chunk 名
  },
]

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // node_modules 分包
          if (id.includes('node_modules')) {
            // Vue 全家桶
            if (id.includes('vue') || id.includes('pinia')) {
              return 'vue-vendor'
            }
            // UI 库
            if (id.includes('element-plus') || id.includes('ant-design')) {
              return 'ui-vendor'
            }
            // 工具库
            if (id.includes('lodash') || id.includes('dayjs')) {
              return 'utils-vendor'
            }
            // 其他第三方库
            return 'vendor'
          }
          // 公共组件
          if (id.includes('src/components/common')) {
            return 'common-components'
          }
        },
      },
    },
  },
})

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 使用 contenthash 确保缓存有效性
        chunkFileNames: 'js/[name].[hash].js',
        entryFileNames: 'js/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash].[ext]',
      },
    },
  },
})

// vite.config.ts（使用 vite-plugin-node-polyfills 等需要缓存的插件）
export default defineConfig({
  cacheDir: 'node_modules/.vite',
})

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      // Rollup 的并行文件操作（注意：这不是真正的多线程构建）
      // Rollup 本身是单线程的，此选项控制并行 I/O 操作数
      maxParallelFileOps: 20, // 默认值
    },
  },
})

// vite.config.ts
export default defineConfig({
  build: {
    // 控制是否清空输出目录
    emptyOutDir: true, // 默认 true
  },
})

// vite.config.ts
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [
    react({
      // SWC 比 Babel 快 20-70 倍
    }),
  ],
})

// vite.config.ts
export default defineConfig(({ mode }) => ({
  build: {
    sourcemap: mode === 'staging' ? 'hidden' : false,
    minify: mode === 'development' ? false : 'esbuild',
    rollupOptions: {
      treeshake: mode === 'production',
    },
  },
}))

// vite.config.ts
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()],
    }),
  ],
  build: {
    minify: 'esbuild',
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          echarts: ['echarts/core', 'echarts/charts', 'echarts/renderers'],
        },
      },
    },
  },
})

// turbo.json
{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"],
      "cache": true
    }
  }
}

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // 精细化分包
            const chunks = {
              vue: ['vue', '@vue', 'vue-router', 'pinia'],
              ui: ['element-plus', '@element-plus'],
              utils: ['lodash', 'axios', 'dayjs'],
              charts: ['echarts', 'zrender'],
            }
            
            for (const [chunkName, packages] of Object.entries(chunks)) {
              if (packages.some(pkg => id.includes(pkg))) {
                return chunkName
              }
            }
            
            return 'vendor'
          }
        },
      },
    },
  },
})