2nd/10_Wiki/Topics/Architecture/Vite Build Tool.md

---
id: wiki-2026-0508-vite-build-tool
title: Vite Build Tool
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Vite, ViteJS, Vite 6]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [build-tool, esbuild, rollup, frontend, dev-server]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: vite
---

# Vite Build Tool

## 매 한 줄
> **"매 native ESM 의 매 dev server, Rollup 의 매 production bundle — 매 cold start 매 ms 단위"**. 매 Evan You (Vue) 매 2020 출시, 매 2026 매 Vite 6 + Rolldown (Rust-based Rollup replacement) 매 stable — 매 Webpack 의 매 사실상 후계자, Next.js / Nuxt / SvelteKit / Remix 의 매 underlying tool.

## 매 핵심

### 매 작동 원리 (Dev)
- 매 browser native ESM 매 의존 — 매 bundle 의 X (dev 시).
- 매 source 변경 시 매 changed module 만 매 transform → instant HMR.
- 매 esbuild 가 매 dependency pre-bundle (Go-based, ~100x faster than tsc).
- 매 on-demand transform — 매 file accessed 시 만 매 process.

### 매 Production Build
- **Rollup** (Vite 5 이하) / **Rolldown** (Vite 6+, Rust): tree-shaking, code splitting.
- 매 multi-page, library mode, SSR build target 매 모두 지원.
- Asset hashing, CSS code split, dynamic import preload 자동.

### 매 응용
1. Vue 3 / Nuxt 3 default build tool.
2. SvelteKit, SolidStart, Astro: dev server.
3. React 매 Vite + React 매 Create React App 의 매 사실상 대체.
4. Storybook 8+: Vite builder.
5. Remix → React Router 7: Vite migration.

## 💻 패턴

### Basic config (Vite 6)
```ts
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: { port: 5173, open: true },
  build: {
    target: "es2022",
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react", "react-dom"],
          ui: ["@radix-ui/react-dialog", "@radix-ui/react-dropdown-menu"],
        },
      },
    },
  },
});
```

### Path alias + env
```ts
import { defineConfig, loadEnv } from "vite";
import path from "node:path";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    resolve: { alias: { "@": path.resolve(__dirname, "src") } },
    define: { __API_URL__: JSON.stringify(env.VITE_API_URL) },
  };
});
```

### Plugin (transform-on-import)
```ts
import type { Plugin } from "vite";

export function svgComponentPlugin(): Plugin {
  return {
    name: "svg-component",
    transform(code, id) {
      if (!id.endsWith(".svg?component")) return null;
      const cleaned = code.replace(/<svg/, '<svg {...props}');
      return { code: `export default (props) => (${cleaned})`, map: null };
    },
  };
}
```

### SSR build
```ts
export default defineConfig({
  build: {
    ssr: "src/entry-server.tsx",
    rollupOptions: { input: "src/entry-server.tsx" },
  },
  ssr: { noExternal: ["some-esm-only-pkg"] },
});
```

### Library mode
```ts
export default defineConfig({
  build: {
    lib: {
      entry: "src/index.ts",
      name: "MyLib",
      formats: ["es", "cjs", "umd"],
      fileName: (fmt) => `my-lib.${fmt}.js`,
    },
    rollupOptions: { external: ["react", "react-dom"] },
  },
});
```

### HMR API (custom)
```ts
// 매 module 매 hot.accept 으로 매 own update logic
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    if (newModule) console.log("Updated:", newModule);
  });
  import.meta.hot.dispose(() => {
    /* cleanup */
  });
}
```

### Vitest (built-in test runner)
```ts
// vite.config.ts — Vitest 매 같은 config 공유
/// <reference types="vitest" />
export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
    coverage: { provider: "v8", reporter: ["text", "html"] },
  },
});
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| 신규 SPA / library | Vite 6 (default) |
| Next.js / Remix app | Vite 매 underlying — direct config 의 X |
| Legacy Webpack project | 매 점진적 migrate, 매 module federation 매 마지막 |
| Monorepo + 복잡한 build graph | Turbopack / Bazel 고려 |
| Large repo (>10K modules) | Vite 6 + Rolldown (Rust speed) |

**기본값**: Vite 6 + esbuild + Rolldown.

## 🔗 Graph
- 부모: [[ESM]]
- 변형: [[Turbopack]] · [[Rspack]]
- 응용: [[Vite Plugin]] · [[SvelteKit]]
- Adjacent: [[esbuild]] · [[Rollup]] · [[Code Splitting]]

## 🤖 LLM 활용
**언제**: Frontend project bootstrap, vite.config 작성, plugin 개발, build performance tuning.
**언제 X**: Pure backend (Node-only) — esbuild / tsx / tsdown 직접, 매 native mobile build.

## ❌ 안티패턴
- **CommonJS only deps**: ESM-first 매 기본 — `ssr.noExternal` workaround 가끔 필요.
- **Webpack-style require.context**: Vite 매 `import.meta.glob` 사용.
- **거대한 manualChunks**: tree-shaking 의 매 망침 — 매 logical boundary 만.
- **`process.env` direct access**: Vite 매 `import.meta.env`.
- **dev 와 prod config 의 큰 divergence**: 매 prod-only bug 의 매 source.
- **No `optimizeDeps`**: large deep dep tree 매 cold start 느려짐.

## 🧪 검증 / 중복
- Verified (Vite 6 official docs, Rolldown RFC, Evan You ViteConf 2025 keynote).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Vite 6, Rolldown, plugin patterns, SSR/library mode |