esbuild

esbuild는 Go 언어로 작성된 초고속 JavaScript/TypeScript 번들러이자 트랜스파일러다. 기존 JS 기반 빌드 도구 대비 10~100배 빠른 성능을 제공한다.

해당 개념이 필요한 이유

• 기존 빌드 도구(webpack, Rollup, Parcel)는 JavaScript로 작성되어 속도에 한계
• 프로젝트가 커질수록 빌드 시간이 분 단위로 증가 → 개발 생산성 저하
• esbuild는 이 성능 병목을 해결하기 위해 탄생

AS-IS (JS 기반 빌드 도구)

three.js 라이브러리 10개 복사본 프로덕션 번들링 벤치마크:

webpack 5:              41.21초
Rollup 4 + Terser:      34.10초
Parcel 2:               14.91초

→ 수십 초 대기

TO-BE (esbuild)

같은 벤치마크:

esbuild:                 0.39초  ← 100배 이상 빠름

→ 1초 이내 완료

왜 이렇게 빠른가?

1. Go 언어: 컴파일된 네이티브 코드로 실행 (V8 JIT 오버헤드 없음)
2. 병렬 처리: Go의 goroutine을 활용한 멀티코어 병렬 파싱/번들링
3. 메모리 효율: 최소한의 메모리 할당으로 GC 부담 감소
4. 처음부터 속도 목표 설계: 기존 도구의 아키텍처 제약 없이 성능 최적화

핵심 기능

• JavaScript, TypeScript, JSX 트랜스파일링
• CSS 번들링 (CSS Modules 포함)
• Tree-shaking 및 Minification
• Source Map 생성
• ESM / CommonJS 모듈 지원
• Watch 모드 및 로컬 개발 서버
• 플러그인 시스템

Vite에서의 역할

esbuild는 Vite에서 두 가지 역할을 한다:

역할	설명
Dependency Pre-bundling	node_modules의 의존성을 ESM으로 변환 + 단일 파일로 합침
TypeScript 트랜스파일링	.ts 파일을 JS로 변환 (tsc 대비 20~30배 빠름, 타입 체크는 안 함)

프로덕션 빌드에는 esbuild 대신 Rollup을 사용한다. 이유: Vite의 플러그인 API가 esbuild와 호환되지 않고, Rollup의 유연한 플러그인 생태계가 더 성숙하기 때문이다. 향후 Rolldown(Rollup의 Rust 포팅)이 이 둘을 통합할 수 있다.

참고 문서

• esbuild - Official Site