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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-vite-build-tool	Vite Build Tool	10_Wiki/Topics	verified	self	Vite ViteJS Vite 6	none	A	0.9	applied	build-tool esbuild rollup frontend dev-server		2026-05-10	pending	language framework typescript 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)

// 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

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)

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

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

Library mode

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)

// 매 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)

// 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

• 부모: Build Tools · ESM · Frontend Tooling
• 변형: Webpack · Turbopack · Parcel · Rspack
• 응용: Vite Plugin · Vitest · Nuxt 3 · SvelteKit
• Adjacent: esbuild · Rollup · Rolldown · HMR · 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