Vite: 차세대 프론트엔드 개발 도구

Vite는 네이티브 ESM 기반 개발 서버로 극도로 빠른 HMR을 제공하고, 프로덕션에서는 Rollup 기반 번들링으로 최적화된 산출물을 생성하는 차세대 프론트엔드 빌드 도구이다.

학습 목표

Vite의 설계 철학과 ESM 기반 개발 서버의 동작 원리를 이해한다
Vite가 기존 번들러(Webpack) 대비 빠른 이유를 기술적으로 설명할 수 있다
개발 모드와 프로덕션 모드에서 각각 어떤 도구를 사용하는지 구분한다
vite.config.ts의 주요 설정을 작성할 수 있다
Vite 생태계(플러그인, 프레임워크 지원)를 파악한다

1. Vite란?

Vite(프랑스어로 "빠르다")는 Vue.js의 창시자 Evan You가 개발한 차세대 프론트엔드 빌드 도구이다. 공식 사이트는 **"Next Generation Frontend Tooling"**이라는 문구로 시작한다.

처음에는 Vue 전용 도구로 시작했지만, 현재는 React, Svelte, Solid 등 주요 웹 프레임워크와 함께 널리 사용되고 있다.

1.1 Vite의 핵심 특성

특성	설명
개발 서버	네이티브 ESM 기반. 번들링 없이 파일을 직접 서빙
프로덕션 빌드	Rollup 기반으로 최적화된 번들 생성
사전 번들링	esbuild를 사용하여 node_modules 의존성을 ESM으로 변환
내장 지원	TypeScript, JSX, CSS, CSS Modules, JSON, 정적 에셋
HMR	ESM 기반 Hot Module Replacement로 즉각적 업데이트
템플릿	다양한 프레임워크(React, Vue, Svelte 등) 시작 템플릿 제공

2. Vite가 해결한 문제

2.1 느린 서버 구동

기존 번들러 기반 개발 서버는 서비스를 제공하기 전에 모든 소스 코드를 번들링해야 했다. 프로젝트가 커지면 서버 구동 시간이 수십 초에서 수 분까지 걸릴 수 있다.

2.2 Vite의 두 가지 전략

Vite는 모듈을 **의존성(Dependencies)**과 소스 코드(Source Code) 두 카테고리로 나누어 처리한다.

의존성 (node_modules):

esbuild를 사용하여 ESM 형태로 사전 번들링 (Pre-bundling)
결과는 캐시되어 다음 실행 시 재사용
변경되지 않으므로 한 번만 처리

소스 코드 (개발자가 작성한 코드):

네이티브 ESM으로 브라우저에 직접 서빙
브라우저가 import 요청을 보내면 그때 해당 파일만 변환
전체를 미리 번들링하지 않으므로 즉시 시작 가능

2.3 빠른 HMR

기존 번들러에서는 파일 하나가 변경되면 전체 번들을 다시 구성해야 하는 경우가 있었다. Vite는 ESM을 활용하여 변경된 모듈과 그 직접적 의존 모듈만 교체한다. 프로젝트 크기와 무관하게 HMR 속도가 일정하게 유지된다.

3. Vite의 내부 구조

3.1 개발 모드에서 esbuild의 역할

역할	설명
의존성 사전 번들링	node_modules의 CJS/UMD 패키지를 ESM으로 변환
TypeScript 트랜스파일	.ts/.tsx 파일의 타입 제거 (타입 검사는 하지 않음)
JSX 트랜스파일	JSX를 JavaScript로 변환

3.2 프로덕션 모드에서 Rollup의 역할

개발 모드에서는 ESM을 직접 서빙하지만, 프로덕션에서는 여전히 번들링이 필요하다. 네이티브 ESM의 중첩 import로 인한 네트워크 왕복(waterfall) 문제가 프로덕션 환경에서는 성능 저하를 유발하기 때문이다.

Vite는 프로덕션 빌드에 Rollup을 사용하여 Tree Shaking, 코드 분할, 청크 최적화 등을 수행한다.

4. Vite 내장 기능

Vite는 별도의 로더나 플러그인 설치 없이 다양한 파일 형식을 바로 지원한다.

기능	설명	별도 설정 필요
TypeScript	esbuild로 트랜스파일	없음
JSX/TSX	React, Vue JSX 지원	프레임워크 플러그인만 추가
CSS	CSS import, HMR 지원	없음
CSS Modules	`.module.css` 파일 자동 인식	없음
SCSS/Less/Stylus	전처리기 패키지만 설치하면 동작	패키지 설치만
JSON	import 가능, named export로 Tree Shaking	없음
정적 에셋	import 시 public URL 반환	없음

5. vite.config.ts 설정

5.1 기본 React 프로젝트 설정

typescript

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

export default defineConfig({
  plugins: [react()],

  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  },

  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  },

  resolve: {
    alias: {
      '@': '/src'
    }
  }
});

5.2 라이브러리 모드 설정

Vite는 애플리케이션뿐 아니라 라이브러리 개발에도 사용할 수 있다. 라이브러리 모드에서는 Rollup의 강력한 출력 설정을 활용한다.

typescript

// vite.config.ts (라이브러리 모드)
import { defineConfig } from 'vite';
import { resolve } from 'path';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [dts()],  // .d.ts 자동 생성

  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      formats: ['es', 'cjs', 'umd'],
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
});

5.3 주요 설정 항목

항목	설명
`plugins`	Vite 플러그인 배열 (Rollup 플러그인 호환)
`server`	개발 서버 설정 (포트, 프록시, HTTPS 등)
`build`	프로덕션 빌드 설정 (출력 경로, 소스맵, Rollup 옵션)
`resolve`	모듈 해석 설정 (별칭, 확장자)
`css`	CSS 관련 설정 (모듈, 전처리기 옵션)
`optimizeDeps`	의존성 사전 번들링 설정 (포함/제외 패키지)

6. 프로젝트 생성과 SWC 활용

bash

# React + TypeScript 프로젝트 생성
npm create vite@latest my-app -- --template react-ts

# React + SWC (Babel 대신 SWC 사용)
npm create vite@latest my-app -- --template react-swc-ts

# Vue 프로젝트
npm create vite@latest my-app -- --template vue-ts

# Svelte 프로젝트
npm create vite@latest my-app -- --template svelte-ts

SWC 템플릿을 선택하면 Babel 대신 SWC로 React JSX를 변환하므로 개발 서버 시작과 HMR이 더 빨라진다.

7. Vite vs Webpack 비교

비교 항목	Vite	Webpack
개발 서버 구동	즉시 (ESM 직접 서빙)	전체 번들링 후 제공
HMR 속도	프로젝트 크기 무관	프로젝트 커질수록 느려짐
설정 복잡도	매우 간단	상대적으로 복잡
프로덕션 빌드	Rollup 기반	Webpack 자체
Module Federation	미지원 (커뮤니티 플러그인 존재)	공식 지원
생태계 크기	빠르게 성장 중	가장 넓음
적합한 프로젝트	새 프로젝트, 라이브러리	레거시, 마이크로프론트엔드

핵심 정리

개념	핵심 내용
Vite	ESM 기반 개발 서버 + Rollup 프로덕션 빌드를 결합한 차세대 빌드 도구
개발 모드	번들링 없이 ESM 직접 서빙. esbuild로 의존성 사전 번들링
프로덕션 모드	Rollup으로 최적화된 번들 생성. esbuild로 미니파이
내장 지원	TypeScript, JSX, CSS, CSS Modules, JSON 등 별도 설정 없이 지원
HMR	ESM 기반으로 변경된 모듈만 교체. 프로젝트 크기 무관하게 빠름
포지셔닝	새 프로젝트의 기본 선택지. Module Federation 필요 시 Webpack 사용

다음 단계

다음 문서 08-도구-선택-가이드.md에서 프로젝트 유형별 도구 조합 추천과 마이크로프론트엔드에서의 도구 선택 기준을 학습한다.

Vite: 차세대 프론트엔드 개발 도구 ​

학습 목표 ​

1. Vite란? ​

1.1 Vite의 핵심 특성 ​

2. Vite가 해결한 문제 ​

2.1 느린 서버 구동 ​

2.2 Vite의 두 가지 전략 ​

2.3 빠른 HMR ​

3. Vite의 내부 구조 ​

3.1 개발 모드에서 esbuild의 역할 ​

3.2 프로덕션 모드에서 Rollup의 역할 ​

4. Vite 내장 기능 ​

5. vite.config.ts 설정 ​

5.1 기본 React 프로젝트 설정 ​

5.2 라이브러리 모드 설정 ​

5.3 주요 설정 항목 ​

6. 프로젝트 생성과 SWC 활용 ​

7. Vite vs Webpack 비교 ​

핵심 정리 ​

다음 단계 ​