Vite 3 釋出了。從 Vite 2 到 3，不只是版本號的變化——冷啟動速度更快、開發體驗更好、外掛生態更成熟。作為團隊構建基礎設施的技術選型負責人，這篇文章聊聊 Vite 3 的核心變化和我們的遷移經驗。

核心改進

冷啟動最佳化

Vite 3 的開發伺服器冷啟動比 Vite 2 快了不少。主要最佳化：

# Vite 3 使用 esbuild 做依賴預構建，但優化了快取策略
vite --force  # 強制重新預構建（清除快取）

# 檢視預構建分析
DEBUG=vite:deps npx vite

內建的 CSS Modules 支援

/* styles.module.css */
.container {
  background: #f5f5f5;
}

/* 自動支援 CSS Modules，不需要額外配置 */

// 直接匯入
import styles from './styles.module.css';

// 帶型別支援（配合 vite-plugin-css-modules-types）
const cls = styles.container;

構建最佳化

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    // Vite 3 支援 CSS code splitting
    cssCodeSplit: true,
    // 更好的 sourcemap 支援
    sourcemap: true,
    // rollup 打包配置
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          router: ['react-router-dom'],
        },
      },
    },
  },
  // Vite 3 新增：開發伺服器配置
  server: {
    // 更快的 HMR
    hmr: {
      overlay: true,
    },
  },
});

外掛生態

Vite 3 的外掛生態已經成熟。我們常用的核心外掛：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import checker from 'vite-plugin-checker';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import Inspect from 'vite-plugin-inspect';

export default defineConfig({
  plugins: [
    react(),

    // TypeScript 型別檢查（不阻塞編譯）
    checker({
      typescript: true,
      eslint: {
        lintCommand: 'eslint src --ext .ts,.tsx',
      },
    }),

    // 圖片壓縮
    ViteImageOptimizer({
      jpeg: { quality: 80 },
      png: { quality: 80 },
    }),

    // 除錯外掛（檢視中間狀態）
    Inspect(),
  ],
});

從 Webpack 遷移的實戰

// webpack.config.js → vite.config.ts

// Before (Webpack):
// module.exports = {
//   resolve: { alias: { '@': path.resolve('src') } },
//   module: { rules: [{ test: /\.svg/, use: ['@svgr/webpack'] }] },
//   plugins: [new HtmlWebpackPlugin(), new DefinePlugin({...})],
//   devServer: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
// };

// After (Vite):
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') },
  },
  plugins: [
    react(),
    svgr(),  // SVG 作為 React 元件匯入
  ],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
  define: {
    'process.env': {},
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: { '@primary-color': '#1890ff' },
        javascriptEnabled: true,
      },
    },
  },
});

環境變數遷移

# Webpack: .env 中用 REACT_APP_ 字首
REACT_APP_API_URL=https://api.example.com

# Vite: 改為 VITE_ 字首
VITE_API_URL=https://api.example.com

// Before
const url = process.env.REACT_APP_API_URL;

// After
const url = import.meta.env.VITE_API_URL;

Monorepo 中的 Vite 配置共享

// packages/vite-config/index.ts
import { defineConfig, type UserConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export function createViteConfig(
  overrides: Partial<UserConfig> = {}
): UserConfig {
  return defineConfig({
    plugins: [react()],
    resolve: {
      alias: { '@': path.resolve('src') },
    },
    build: {
      target: 'es2020',
      minify: 'esbuild',
    },
    ...overrides,
  });
}

// apps/admin/vite.config.ts
import { createViteConfig } from '@mono/vite-config';

export default createViteConfig({
  server: { port: 3001 },
  build: {
    outDir: 'dist/admin',
  },
});

效能對比

我們一箇中型後臺專案（200+ 頁面元件）的實測資料：

| 指標 | Webpack 5 | Vite 2 | Vite 3 | | ------|-----------|--------|--------| | 冷啟動 | 45s | 3.2s | 2.1s | | HMR | 800ms | 28ms | 18ms | | 生產構建 | 120s | 35s | 28s |

冷啟動提升最明顯，開發體驗質的飛躍。

小結

Vite 3 標誌著前端構建工具進入新階段。基於瀏覽器原生 ESM 的開發模式已經被驗證是可行的。對於新專案，沒有理由不用 Vite。對於老專案，遷移成本不高，收益明顯。接下來我會寫 Vitest——Vite 原生的測試框架，配合 Vite 組成完整的工具鏈。