Vite vs Webpack vs Turbopack: 빌드 도구

| 도구 | 개발 시작 | HMR | 프로덕션 빌드 | 적합 |
|---|---|---|---|---|
| Webpack 5 | 30s | 500ms | 90s | 레거시·복잡 |
| Vite | 1s | 50ms | 30s | 신규 SPA·라이브러리 |
| Turbopack (Next 15+) | 2s | 100ms | 45s | Next.js 표준 |
| Parcel | 3s | 200ms | 60s | 제로 설정 |

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import tsconfigPaths from 'vite-tsconfig-paths';

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

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },

  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },

  build: {
    target: 'es2020',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          'ui-vendor': ['@radix-ui/react-dialog', 'framer-motion'],
        },
      },
    },
  },

  optimizeDeps: {
    include: ['react', 'react-dom'],
  },
});

// .env.development
VITE_API_URL=http://localhost:8080

// 사용 (자동 타입)
const url = import.meta.env.VITE_API_URL;


// env.d.ts
interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_FEATURE_FLAG_X: string;
}
interface ImportMeta {
  readonly env: ImportMetaEnv;
}

// ESM (Vite/Next 권장)
import { foo } from './bar.js';
export default function() {}

// CommonJS (Node.js 레거시)
const { foo } = require('./bar.js');
module.exports = function() {};


// package.json — type: "module"
{
  "type": "module",
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  }
}

// rollup-plugin-visualizer로 분석
import { visualizer } from 'rollup-plugin-visualizer';

build: {
  rollupOptions: {
    plugins: [visualizer({ open: true, filename: 'dist/stats.html' })],
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          if (id.includes('react')) return 'react-vendor';
          if (id.includes('@radix-ui')) return 'ui-vendor';
          if (id.includes('lodash')) return 'util-vendor';
          return 'vendor';
        }
      },
    },
  },
}