개발 서버는 빠른데 프로덕션만 느립니다.

개발은 변환 최소·소스맵·HMR 오버헤드가 없고, 프로덕션은 압축·청크·런타임 비용이 붙습니다. build.rollupOptions·동적 import·번들 분석(rollup-plugin-visualizer)으로 병목을 확인합니다.

Failed to resolve import가 납니다.

별칭·확장자·조건부 export(exports 필드) 불일치를 의심합니다. resolve.alias·ssr.external·패키지 버전을 점검합니다.

SSR에서 window is not defined가 납니다.

클라이언트 전용 모듈을 서버 번들이 끌어오고 있습니다. 동적 import·ssr.noExternal 조정·라이브러리 분기로 고립합니다.

optimizeDeps에 수동으로 넣는 기준은?

CommonJS·깨진 ESM 엣지·사전 번들이 실패하는 패키지를 include로 돕습니다. 반대로 불필요한 include는 dev 서버 cold start를 키울 수 있습니다.

Vite 5 완벽 가이드 | 빌드 도구·HMR·플러그인·최적화·Rollup

2026년 4월 7일 · 4분 읽기 · 수정 2026년 4월 18일 중급

이 글의 핵심

개발 모드는 네이티브 ESM과 esbuild 기반 의존성 사전 번들로 cold start를 줄이고, 프로덕션은 Rollup으로 트리 쉐이킹·청크 분할합니다. optimizeDeps·ssr.noExternal·경로 별칭 불일치 같은 운영 이슈를 진단하는 법을 정리합니다.

이 글의 핵심

Vite 5로 빠른 개발 환경을 구축하는 완벽 가이드입니다. 설치부터 HMR, 플러그인, 환경 변수, 빌드 최적화, Rollup 설정까지 실전 예제로 정리했습니다.

실무 경험 공유: Webpack 프로젝트를 Vite로 마이그레이션하면서, 개발 서버 시작 시간을 40초에서 2초로 단축하고 HMR을 10배 빠르게 만든 경험을 공유합니다.

들어가며: “Webpack이 너무 느려요”

실무 문제 시나리오

시나리오 1: 개발 서버가 40초 걸려요

Webpack dev server 시작이 느립니다. Vite는 2초입니다. 시나리오 2: HMR이 느려요

파일 저장 후 반영이 3초 걸립니다. Vite는 즉시 반영됩니다. 시나리오 3: 설정이 복잡해요

Webpack 설정이 수백 줄입니다. Vite는 최소한의 설정으로 시작합니다.

1. Vite란?

핵심 특징

Vite는 차세대 프론트엔드 빌드 도구입니다. 주요 장점:

빠른 시작: ESBuild로 즉시 시작
빠른 HMR: 네이티브 ESM 활용
간단한 설정: 최소한의 설정
플러그인: Rollup 플러그인 호환
프레임워크 지원: React, Vue, Svelte 등 성능 비교:
Webpack: 개발 서버 40초, HMR 3초
Vite: 개발 서버 2초, HMR 즉시

2. 프로젝트 생성

템플릿으로 시작

# React
npm create vite@latest my-app -- --template react-ts
# Vue
npm create vite@latest my-app -- --template vue-ts
# Svelte
npm create vite@latest my-app -- --template svelte-ts
# Vanilla
npm create vite@latest my-app -- --template vanilla-ts

수동 설정

npm install -D vite

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

3. 기본 설정

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

4. 플러그인

공식 플러그인

# React
npm install -D @vitejs/plugin-react
# Vue
npm install -D @vitejs/plugin-vue
# Svelte
npm install -D @sveltejs/vite-plugin-svelte

5. 환경 변수

.env 파일

# .env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

# .env.production
VITE_API_URL=https://api.production.com

사용

// src/config.ts
export const config = {
  apiUrl: import.meta.env.VITE_API_URL,
  appTitle: import.meta.env.VITE_APP_TITLE,
  isDev: import.meta.env.DEV,
  isProd: import.meta.env.PROD,
};

TypeScript 타입

// src/vite-env.d.ts
/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_APP_TITLE: string;
}
interface ImportMeta {
  readonly env: ImportMetaEnv;
}

6. 정적 파일

public 디렉터리

public/
├── favicon.ico
├── robots.txt
└── images/
    └── logo.png

<!-- 절대 경로로 참조 -->
<img src="/images/logo.png" alt="Logo" />

src 디렉터리

// 상대 경로로 import
import logo from './assets/logo.png';
function App() {
  return <img src={logo} alt="Logo" />;
}

7. CSS

CSS Modules

/* Button.module.css */
.button {
  background: blue;
  color: white;
}

import styles from './Button.module.css';
export function Button() {
  return <button className={styles.button}>Click me</button>;
}

PostCSS

npm install -D postcss autoprefixer

// postcss.config.js
export default {
  plugins: {
    autoprefixer: {},
  },
};

Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

8. 빌드 최적화

코드 스플리팅

// 동적 import
const Dashboard = lazy(() => import('./Dashboard'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

청크 분리

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@mui/material'],
        },
      },
    },
  },
});

압축

// vite.config.ts
import viteCompression from 'vite-plugin-compression';
export default defineConfig({
  plugins: [
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz',
    }),
  ],
});

9. 프록시 설정

TypeScript/JavaScript 예제 코드입니다.

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '),
      },
    },
  },
});

// 사용
fetch('/api/users')  // → http://localhost:8080/users

10. 라이브러리 모드

라이브러리 빌드

// vite.config.ts
import { resolve } from 'path';
export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

11. 실전 예제: React 앱

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
import viteCompression from 'vite-plugin-compression';
export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My React App',
        short_name: 'App',
        theme_color: '#ffffff',
        icons: [
          {
            src: '/icon-192.png',
            sizes: '192x192',
            type: 'image/png',
          },
        ],
      },
    }),
    viteCompression(),
  ],
  
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
  
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'react-router-dom'],
          ui: ['@mui/material', '@emotion/react', '@emotion/styled'],
        },
      },
    },
  },
  
  resolve: {
    alias: {
      '@': '/src',
      '@components': '/src/components',
      '@utils': '/src/utils',
    },
  },
});

12. Webpack에서 마이그레이션

1단계: Vite 설치

npm install -D vite @vitejs/plugin-react

2단계: index.html 이동

<!-- public/index.html → index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

3단계: 환경 변수 변경

// Webpack
process.env.REACT_APP_API_URL
// Vite
import.meta.env.VITE_API_URL

4단계: import 경로 수정

// Webpack
import logo from './logo.svg';
// Vite (동일하지만 타입 추가)
import logo from './logo.svg?url';

심화: 개발 서버 내부·optimizeDeps·SSR

esbuild 사전 번들

브라우저가 node_modules를 그대로 해석하면 수천 개의 작은 파일을 요청하게 됩니다. Vite는 의존성을 esbuild로 CJS/ESM 정리해 단일 모듈 그래프로 묶는 사전 번들(pre-bundling)을 수행합니다. optimizeDeps.include·exclude로 예외를 주고, 깊은 의존성이 ESM만 제공하는 패키지는 ssr.noExternal과 혼동하지 않도록 주의합니다(용도가 다릅니다: 브라우저 로딩 최적화 vs SSR 번들에 포함).

HMR 그래프

HMR은 모듈 경계를 따라 갱신합니다. 상태 보존이 필요하면 컴포넌트 분리·import.meta.hot API를 사용하고, 전역 스타일 변경은 전체 리로드로 떨어질 수 있습니다.

프로덕션 Rollup

vite build는 Rollup으로 정적 자산 해시·코드 스플리팅을 합니다. manualChunks는 초기 번들과 캐시 무효화 범위를 바꾸므로, 벤더 청크를 과도하게 크게 만들면 캐시 적중률이 떨어질 수 있습니다.

SSR 경계

프레임워크 플러그인(@vitejs/plugin-react 등)은 서버/클라이언트 이중 변환을 맞춥니다. 브라우저 전용 라이브러리가 서버 번들에 들어오면 즉시 터지므로, 조건부 import와 ssr.external을 함께 설계합니다.

트러블슈팅 요약

증상	점검
의존성 변경 후에도 캐시된 오류	`optimizeDeps.force` 또는 `node_modules/.vite` 삭제
미리보기만 다른 동작	`base`·`import.meta.env`·프록시 설정
대형 라이브러리 지연	동적 import·사전 번들 include

정리 및 체크리스트

핵심 요약

Vite: 차세대 프론트엔드 빌드 도구
빠른 시작: ESBuild로 즉시 시작
빠른 HMR: 네이티브 ESM 활용
간단한 설정: 최소한의 설정
플러그인: 풍부한 생태계

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

Vite, Build Tool, HMR, Rollup, ESBuild, Frontend, Performance

자주 묻는 질문 (FAQ)

Q. Vite vs Webpack, 어떤 게 나은가요?

A. Vite가 훨씬 빠릅니다. 새 프로젝트는 Vite를 권장합니다. 레거시 프로젝트는 점진적 마이그레이션이 가능합니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, Vite는 안정적이며 Vue, Svelte 등 많은 프레임워크의 공식 빌드 도구입니다.

Q. Webpack 플러그인을 사용할 수 있나요?

A. 아니요, Rollup 플러그인을 사용해야 합니다. 대부분의 Webpack 플러그인에 대응하는 Rollup 플러그인이 있습니다.

Q. IE11을 지원하나요?

A. 기본적으로 지원하지 않습니다. @vitejs/plugin-legacy를 사용하면 지원 가능하지만 권장하지 않습니다.

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「Vite 5 완벽 가이드 | 빌드 도구·HMR·플러그인·최적화·Rollup」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「Vite 5 완벽 가이드 | 빌드 도구·HMR·플러그인·최적화·Rollup」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.

Keyboard Shortcuts

이 글의 핵심

이 글의 핵심

들어가며: “Webpack이 너무 느려요”

실무 문제 시나리오

Webpack 설정이 수백 줄입니다. Vite는 최소한의 설정으로 시작합니다.

1. Vite란?

핵심 특징

2. 프로젝트 생성

템플릿으로 시작

수동 설정

3. 기본 설정

vite.config.ts

4. 플러그인

공식 플러그인

인기 플러그인

5. 환경 변수

.env 파일

사용

TypeScript 타입

6. 정적 파일

public 디렉터리

src 디렉터리

7. CSS

CSS Modules

PostCSS

Tailwind CSS

8. 빌드 최적화

코드 스플리팅

청크 분리

압축

9. 프록시 설정

10. 라이브러리 모드

라이브러리 빌드

11. 실전 예제: React 앱

12. Webpack에서 마이그레이션

1단계: Vite 설치

2단계: index.html 이동

3단계: 환경 변수 변경

4단계: import 경로 수정

심화: 개발 서버 내부·optimizeDeps·SSR

esbuild 사전 번들

HMR 그래프

프로덕션 Rollup

SSR 경계

트러블슈팅 요약

정리 및 체크리스트

핵심 요약

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

자주 묻는 질문 (FAQ)

Q. Vite vs Webpack, 어떤 게 나은가요?

Q. 프로덕션에서 사용해도 되나요?

Q. Webpack 플러그인을 사용할 수 있나요?

Q. IE11을 지원하나요?

심화 부록: 구현·운영 관점

내부 동작과 핵심 메커니즘

프로덕션 운영 패턴

확장 예시: 엔드투엔드 미니 시나리오

문제 해결(Troubleshooting)

이 글이 도움이 되셨나요?