Vite (빌드 툴) 학습

1️⃣ Vite란?

Vite는 개발(Dev) 환경에서 빠른 피드백을 제공하도록 설계된 프론트엔드 빌드 툴입니다. 개발 서버는 ES 모듈(ESM)을 활용해 파일을 브라우저가 직접 불러오게 하고, 의존성은 esbuild로 사전 번들링하여 시작 시간을 최소화합니다. 프로덕션 빌드는 Rollup을 사용해 최종 번들을 최적화합니다.

• 핵심은 개발에서의 속도(빠른 시작·HMR)와 프로덕션에서의 최적화(트리 쉐이킹·코드 스플리팅)를 둘 다 제공하는 것에 있습니다.

2️⃣ Vite의 기본 동작 (요약)

🔹 Dev Server (ESM 기반)

• 소스 파일은 브라우저가 ESM으로 직접 요청 → 필요한 파일만 변환/로딩
• 변경 시 HMR로 빠르게 반영

🔹 의존성 사전 번들링 (esbuild)

• node_module의 의존성(특히 ESM으로 바로 제공되지 않는 패키지)을 esbuild로 한번만 번들링 → dev 서버 성능 향상

🔹 Prod 빌드 (Rollup)

• vite build 시 Rollup을 사용해 최종 번들을 생성 → 트리 쉐이킹, 코드 스플리팅, 플러그인 호환성 등 강점

🔹 플러그인 호환성

• Vite 플러그인 Rollup 플러그인 인터페이스와 유사하여 생태계 활용이 용이

3️⃣ ESBuild / Rollup / SWC — 역할 & 조합

🔹 ESBuild

• 역할: 빠른 변환/의존성 pre-bundle (개발 모드 중심)
• 장점: 매우 빠름, 빌드/최소화 속도 우수

🔹 Rollup

• 역할: 프로덕션 번들러 (번들 생성·최적화)
• 장점: 플로그인 생태계, 정교한 출력 제어(코드 스플리팅 등)

🔹 SWC

• 역할: 고성능 트랜스파일러(JS/TS/JSX 변환) - Babel 대체 가능
• 사용: 플로그인(@vitejs/plugin-react-swc, unplugin-swc 등)으로 통합해 변환 속도 향상

조합 예시: 개발 시 esbuild(의존성 사전 번들링) + SWC로 빠른 트랜스폼(선택) → 프로덕션에서 Rollup으로 최종 번들.

4️⃣ 빠른 시작 (React + TypeScript 예시)

# 새 프로젝트 생성 (대화형)
<a id="새-프로젝트-생성-대화형"></a>
npm create vite@latest my-vite-app

# 템플릿 직접 지정
<a id="템플릿-직접-지정"></a>
npm create vite@latest my-vite-app -- --template react-ts

cd my-vite-app
npm install

# 개발 서버 실행
<a id="개발-서버-실행"></a>
npm run dev

# 프로덕션 빌드
<a id="프로덕션-빌드"></a>
npm run build

# 로컬 빌드 미리보기
<a id="로컬-빌드-미리보기"></a>
npm run preview

• index.html이 실제 엔트리 포인트라는 점에 유의: HTML에서 모듈을 직접 import

5️⃣ vite.config.ts 예제 (기본 / SWC 포함)

🔹 기본 (plugin-react)

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 },
  resolve: {
    alias: { '@': '/src' },
  },
  build: {
    target: 'es2020',
    minify: 'esbuild',
    sourcemap: false,
  },
});

🔹 SWC 기반 (예: @vitejs/plugin-react-swc)

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['some-commonjs-lib'],
  },
  build: {
    target: 'es2020',
    minify: 'esbuild',
  },
});

• SWC 플러그인을 사용하면 JSX/TS 변환이 빨라질 수 있으나, 플러그인 동작이 일부 파이프라인을 변경할 수 있으니 문서 확인 필요

6️⃣ 주요 설정 포인트 (성능 관점)

• optimizeDeps

  • dev 시 의존성 사전 번들링 제어(include/exclude)
  • CJS 레거시 패키지로 인한 느려짐을 조정

• resolve.alias

  • import 경로 간소화 및 빌드 안전성\

• build.target

  • 어떤 브라우저 타깃으로 빌드할지 명시
  • 불필요한 트랜스 파일/폴리필을 줄여 성능 최적화

• build.minify

  • 기본은 ebuild(속도)
  • 더 강한 압축률이 필요하면 terser 고려

• rollupOptions.output.manualChunks

  • 라이브러리별 청크 분리로 초기 로드 최적화(캐시 효율↑)

• server.watch

  • 도커/WSL 등 환경에서 파일 감시(watch) 이슈가 있을 때 조정