Vite

Vite(프랑스어로 “빠르다”를 의미, /vit/로 발음)는 현대 웹 프로젝트를 위한 빌드 도구로, 더 빠르고 가벼운 개발 경험을 제공하는 것을 목표로 한다.

두 가지 핵심 구성요소로 이루어져 있다:

1. Dev Server: Native ES Modules 위에서 동작하며, 매우 빠른 Hot Module Replacement(HMR) 제공
2. Build Command: Rollup을 사용하여 프로덕션용 최적화된 정적 에셋 번들링

해당 개념이 필요한 이유

• Cold Start 속도 문제: 기존 번들러(webpack 등)는 개발 서버 시작 시 전체 애플리케이션을 크롤링하고 빌드해야 했다. 수천 개의 모듈을 가진 대규모 프로젝트에서는 서버 시작에 수 분이 소요
• 느린 HMR 업데이트: 기존 번들러는 파일 변경 시 전체 번들을 다시 빌드해야 하므로, 앱이 커질수록 HMR 속도가 현저히 저하
• 개발-프로덕션 격차: 개발 환경과 프로덕션 빌드 사이의 일관성 확보 필요

AS-IS (기존 번들러 기반 개발)

서버 시작

sequenceDiagram
    autonumber
    participant Dev as 개발자
    participant Bundler as 번들러 (webpack)
    participant Browser as 브라우저

    Dev->>Bundler: 개발 서버 시작
    Bundler->>Bundler: 전체 소스 코드 크롤링
    Bundler->>Bundler: 의존성 그래프 구축
    Bundler->>Bundler: 모든 모듈을 하나의 Bundle로 빌드
    Note over Bundler: 앱이 클수록 수 분 소요
    Bundler->>Browser: Bundle 제공 → 서버 Ready

파일 수정 시

sequenceDiagram
    autonumber
    participant Dev as 개발자
    participant Bundler as 번들러 (webpack)
    participant Browser as 브라우저

    Dev->>Bundler: 파일 1개 수정
    Bundler->>Bundler: 전체 Bundle 재빌드 (변경 안 된 모듈 포함)
    Note over Bundler: 앱이 클수록 HMR도 느려짐
    Bundler->>Browser: 새 Bundle 전송 → 업데이트

TO-BE (Vite 방식)

서버 시작

sequenceDiagram
    autonumber
    participant Dev as 개발자
    participant Vite
    participant esbuild
    participant Browser as 브라우저

    Dev->>Vite: 개발 서버 시작
    Vite->>esbuild: Dependencies만 Pre-bundling 요청
    esbuild->>esbuild: CommonJS/UMD → ESM 변환 + 단일 파일로 합침
    Note over esbuild: Go 기반 → 10~100배 빠름
    esbuild-->>Vite: 캐싱된 의존성 준비 완료
    Vite->>Browser: 서버 Ready (소스 코드는 아직 빌드 안 함)
    Browser->>Vite: 페이지 접근 → 필요한 모듈만 요청
    Vite->>Browser: Native ESM으로 on-demand 제공

파일 수정 시

sequenceDiagram
    autonumber
    participant Dev as 개발자
    participant Vite
    participant Browser as 브라우저

    Dev->>Vite: 파일 1개 수정
    Vite->>Vite: 해당 모듈 ~ 가장 가까운 HMR 경계까지만 무효화
    Note over Vite: 나머지 모듈은 그대로 유지
    Vite->>Browser: 변경된 모듈만 ESM으로 전송
    Note over Browser: 상태 유지 + 즉시 반영 (앱 크기와 무관)

Vite의 핵심 전략: 모듈 분류

Vite는 모듈을 두 가지 카테고리로 나눠 처리한다:

1. Dependencies (의존성)

• node_modules에 있는 대부분 정적인 JavaScript
• 변경이 드물고 크기가 큰 패키지들 (예: lodash, react)
• esbuild로 사전 번들링 (Go로 작성되어 JS 기반 번들러 대비 10~100배 빠름)
• CommonJS/UMD 모듈을 ESM으로 변환
• HTTP 헤더로 강력하게 캐싱

2. Source Code (소스 코드)

• JSX, CSS, Vue/Svelte 컴포넌트 등 변환이 필요한 코드
• 자주 수정되며, 항상 전체를 로드할 필요 없음
• **Native ESM**으로 제공 → 브라우저가 필요한 모듈만 on-demand로 요청
• 304 Not Modified 응답과 Cache-Control 헤더 활용

프로덕션 빌드: 왜 여전히 번들링하는가?

Native ESM이 브라우저에서 널리 지원되지만, 프로덕션에서 번들링 없이 배포하면 비효율적이다:

• 중첩된 import로 인한 추가 네트워크 왕복(round trip) 발생
• Tree-shaking 불가

Tree-shaking: 번들링 시 실제로 사용되지 않는 코드(dead code)를 자동으로 제거하는 최적화 기법. 예를 들어 lodash에서 debounce만 import하면, 나머지 함수들은 최종 번들에 포함되지 않는다. ESM의 정적 import/export 구문 덕분에 가능하다 (CommonJS의 동적 require()로는 불가).

• Code Splitting 같은 최적화 불가

Code Splitting: 번들을 여러 개의 작은 청크(chunk)로 분할하여, 필요한 시점에만 로드하는 기법. 예를 들어 관리자 페이지 코드는 관리자가 접근할 때만 로드된다. import() 동적 import와 함께 사용하며, 초기 로딩 성능을 크게 개선한다.

따라서 Vite는 프로덕션 빌드에 Rollup을 사용한다.

esbuild vs Rollup: 왜 둘 다 쓰는가?

역할	도구	이유
Dev 의존성 Pre-bundling	esbuild	Go 기반으로 10~100배 빠름
Production Build	Rollup	유연한 플러그인 생태계, tree-shaking 우수

esbuild가 프로덕션 빌드에도 빠르지만, Vite의 플러그인 API가 esbuild와 호환되지 않는다. 향후 Rolldown(Rollup의 Rust 포팅)이 두 도구를 통합할 수 있다.

주요 기능 (Features)

NPM 의존성 처리

• bare module import (예: import { ref } from 'vue')를 브라우저가 인식할 수 있는 URL로 변환
• /node_modules/.vite/deps/vue.js?v=f3sf2ebd 형태로 리라이트

TypeScript 지원

• .ts 파일을 네이티브로 import 가능
• esbuild를 사용하여 tsc 대비 20~30배 빠른 트랜스파일링
• 단, 타입 체크는 수행하지 않음 → IDE나 tsc --noEmit으로 별도 실행 필요

CSS 처리

• CSS import 시 <style> 태그로 자동 삽입 + HMR 지원
• @import 인라이닝, PostCSS, CSS Modules (.module.css), Sass/Less/Stylus 지원

빌드 최적화

• CSS Code Splitting: 비동기 청크의 CSS를 자동 분리
• Preload Directive 생성: 최적화된 리소스 로딩
• Async Chunk 로딩 최적화: 불필요한 네트워크 왕복 제거

Vite의 영감을 받은 도구들

도구	기여	상태
Snowpack	Native ESM dev server, dependency pre-bundling 개념 영감	Archived
WMR (Preact)	Universal Rollup plugin API 영감	유지보수 종료
@web/dev-server	Koa 기반 서버 아키텍처 영감	활발히 유지

Q&A

Q) “그렇다면 Vite는 프론트엔드 프레임워크인 React, Vue.js, Angular 등에 모두 붙일 수 있는 프레임워크야?”

• Vite는 **프레임워크가 아니라 빌드 도구(Build Tool)**다. React, Vue, Angular 같은 프레임워크와 동일 계층이 아니라 하위 인프라 계층에 위치한다.
• 비유하자면: React/Vue = 자동차, Vite = 엔진. 엔진은 여러 자동차에 장착할 수 있다.
• 플러그인 기반 아키텍처로 프레임워크를 지원한다. 공식 create-vite 템플릿이 제공하는 프레임워크:

프레임워크	공식 템플릿	비고
Vue	O	Vite 창시자(Evan You)가 Vue 창시자이기도 함
React	O	react, react-ts, react-swc 템플릿 제공
Svelte	O
Solid	O
Preact	O
Lit	O	Web Components
Qwik	O
Angular	X (공식 템플릿 없음)	단, Angular 16+부터 자체적으로 Vite를 dev server로 채택함
Vanilla JS/TS	O	프레임워크 없이 순수 JS/TS	>

• 핵심: Vite는 특정 프레임워크에 종속되지 않는 범용 빌드 도구이며, 플러그인을 통해 거의 모든 프론트엔드 프레임워크와 함께 사용할 수 있다.

참고 문서

• Why Vite - Official Guide
• Getting Started - Official Guide
• Features - Official Guide