Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

5.4 KiB

Raw Blame History

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

title

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 자동.

매 응용

Vue 3 / Nuxt 3 default build tool.
SvelteKit, SolidStart, Astro: dev server.
React 매 Vite + React 매 Create React App 의 매 사실상 대체.
Storybook 8+: Vite builder.
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

부모: 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

5.4 KiB Raw Blame History