필요에 맞는 Vite 플러그인 고르기

Vite 플러그인은 많지만 React SPA에 꼭 필요한 건 몇 개뿐이야. 역할이 분명한 플러그인만 남기는 기준을 세워 보자.

기본 스택에 필요한 플러그인

@vitejs/plugin-react는 JSX transform과 Fast Refresh를 제공해.
@tailwindcss/vite는 Tailwind v4의 CSS 변환을 Vite에 연결해.
vite-plugin-svgr는 SVG를 React 컴포넌트로 가져와야 할 때 사용해.
rollup-plugin-visualizer는 빌드 결과를 treemap으로 보여 줘 큰 의존성을 찾게 해.
vite-plugin-checker는 TypeScript와 ESLint 검사를 별도 프로세스에서 실행해 개발 서버를 덜 막아.

제품 요구가 있을 때만 더해

오프라인 설치가 필요하면 vite-plugin-pwa, 여러 아이콘 모음을 type-safe하게 가져와야 하면 unplugin-icons, 빌드 중 이미지 크기와 포맷을 바꿔야 하면 vite-imagetools를 검토해.

필요를 설명할 수 없는 플러그인은 넣지 마

플러그인마다 시작 시간과 설정, 업그레이드와 실패 지점이 늘어나. 기본 Vite, React, Tailwind만으로도 프로덕션 SPA를 만들 수 있어. 해결할 문제가 분명해진 뒤 추가해.

플러그인 목록은 제품의 요구를 보여 줘야 해. PWA는 오프라인 설치, imagetools는 많은 이미지처럼 각각 선택 이유가 있어야 해.

자주 쓰는 플러그인의 정확한 역할

@vitejs/plugin-react는 JSX와 Fast Refresh를, @tailwindcss/vite는 Tailwind v4 변환을 맡아. vite-plugin-svgr는 SVG를 React 컴포넌트로 가져오고, rollup-plugin-visualizer는 번들 treemap을 만들어. vite-plugin-checker는 TypeScript와 ESLint를 개발 서버와 별도 과정에서 검사해.

선택 플러그인은 제품 기능과 연결해

vite-plugin-pwa는 service worker와 설치 경험이 필요할 때, unplugin-icons는 큰 아이콘 집합에서 필요한 항목만 type-safe하게 가져올 때, vite-imagetools는 빌드 중 resize와 포맷 변환, srcset 생성이 필요할 때 검토해.

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

프로젝트에 vite-plugin-svgr를 설치해 SVG 하나를 React 컴포넌트로 가져오고 개발 서버와 production build에서 모두 렌더링해. 이어서 vite-plugin-checker를 연결하고 일부러 TypeScript 오류를 만들어 editor뿐 아니라 개발 화면의 overlay에서도 보이는지 확인해. 두 플러그인을 각각 제거했을 때 해당 기능만 사라지고 기본 빌드는 유지되는지도 기록해.

Hint

SVG import 타입을 찾지 못하면 vite-env.d.ts에 플러그인의 client type reference가 필요한지 문서를 확인해. 최종 상태에서는 의도적으로 만든 타입 오류를 제거하고 npm run build가 성공해야 해.

기본 스택에 필요한 플러그인

제품 요구가 있을 때만 더해

필요를 설명할 수 없는 플러그인은 넣지 마

자주 쓰는 플러그인의 정확한 역할

선택 플러그인은 제품 기능과 연결해

Code

External links

Exercise

Progress

댓글 0