Vite 플러그인 — 기본

Vite 의 플러그인 생태계는 1마일 넓고 대부분 필요 없음. 이것들이 거의 모든 React 19 SPA 에서 밥값 함.

필수 다섯

@vitejs/plugin-react — React Fast Refresh, JSX transform, dev-only 자동 import 연결. 어떤 React 프로젝트에도 필수.
@tailwindcss/vite — Tailwind v4 통합 (Track 1 lesson 3).
vite-plugin-svgr — SVG 파일을 React 컴포넌트로 import: import { ReactComponent as Icon } from './icon.svg'. SVG 아이콘 쓰면 필수.
rollup-plugin-visualizer — 빌드 후 번들 treemap (Track 8 lesson 1).
vite-plugin-checker — dev 중 별도 프로세스에서 TypeScript 와 ESLint 돌림 → dev server 안 늦추고 브라우저 프리뷰 옆에 에러 surface.

선택적이지만 유용

vite-plugin-pwa — SPA 를 오프라인 지원 + 설치 가능한 PWA 로.
unplugin-icons — 아이콘 셋 (Lucide, Heroicons 등) 에서 tree-shaking 가진 타입-안전 아이콘 import.
vite-imagetools — 빌드 시 이미지 처리 (resize, 포맷 변환, srcset 생성).

피할 것

추측해서 플러그인 추가 마. 각각이 시작 시간과 새 실패 표면 추가. 기본 Vite + React + Tailwind 셋업이 출하 충분; 특정 필요 있을 때 플러그인 손이 가.

플러그인 선택이 스택 정체성의 일부. 위 필수 다섯이 거의 모든 모던 React SPA 에 나옴. 선택 거가 앱에 대해 뭔가 말함 (PWA → 오프라인 가능; imagetools → 이미지 무거움; unplugin-icons → 디자인-시스템 구동). 앱이 실제로 하는 것에 매치되는 플러그인 선택.

Code

필수 가진 현실적 vite.config.ts·ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import svgr from "vite-plugin-svgr";
import checker from "vite-plugin-checker";
import { visualizer } from "rollup-plugin-visualizer";
import path from "node:path";

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [["babel-plugin-react-compiler", {}]],
      },
    }),
    tailwindcss(),
    svgr(),
    checker({ typescript: true }),
    visualizer({ filename: "dist/stats.html" }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
    port: 5173,
    proxy: {
      "/api": "http://localhost:8000",
    },
  },
});

Exercise

Bootstrap 프로젝트에 vite-plugin-svgr 설치. src/assets/ 에 SVG 떨어뜨림. React 컴포넌트로 import (import { ReactComponent as MyIcon } from './assets/icon.svg'). 렌더. 그 다음 typescript: true 로 vite-plugin-checker 설치 + 일부러 타입 에러가 dev 중 브라우저 오버레이에 나타나는지 확인 (에디터에만 아님).

Hint

SVG import 안 되면 TypeScript 가 import 인식하게 vite-env.d.ts 에 /// <reference types="vite-plugin-svgr/client" /> 추가 필요할 수도.

Vite 플러그인 — 기본

필수 다섯

선택적이지만 유용

피할 것

Code

External links

Exercise

Progress

댓글 0