번들러의 계보 — webpack 부터 Rolldown 까지

프론트엔드 번들러는 지난 10 여 년간 빠르게 갈라져 왔습니다.

1. 번들러가 하는 일

① 엔트리에서 시작해 import 따라 의존성 그래프 생성
② 각 모듈 트랜스폼 (JSX → JS, TS → JS, SCSS → CSS)
③ 그래프를 합쳐 브라우저용 번들로
④ 안 쓰는 코드 제거 (트리 셰이킹) + 코드 분할 (code splitting)

dev 와 prod 의 요구가 다릅니다. dev 에서는 빠른 시작과 HMR (Hot Module Replacement) 이, prod 에서는 작고 빠른 출력 코드가 중요합니다. 이 둘을 한 도구로 풀지, 다른 도구로 풀지가 갈래를 만들었습니다.

2. 핵심 개념

HMR (Hot Module Replacement) — 파일이 바뀌었을 때 페이지를 새로고침하지 않고 그 모듈만 갈아끼웁니다. webpack 이 2016 년 무렵 대중화했고 Vite 가 ESM 위에서 더 빠르게 다시 정의했습니다.

트리 셰이킹 — 수입했지만 사용하지 않은 export 를 결과물에서 제거. ES Modules 의 정적 구조 (import/export 가 최상단) 가 분석을 가능하게 합니다. CommonJS 는 동적이라 분석이 어렵습니다.

code splitting — 한 번에 다 보내지 않고 라우트 또는 동적 import 단위로 나눕니다. import("./Big") 가 별도 청크가 됩니다.

ESM 네이티브 — 브라우저가 <script type="module"> 로 ES Modules 를 직접 이해합니다 (2018+ 모든 메이저). 개발 시 번들 없이 그대로 띄우는 길이 열렸습니다 (Vite 의 출발점).

3. 도구 연표

도구	첫 릴리스	만든이	언어	비고
webpack	2012	Tobias Koppers	JS	가장 큰 사용처. 현재도 유지.
Browserify	2011	substack	JS	webpack 이전 표준.
Rollup	2015	Rich Harris	JS	라이브러리 번들에 강함. ESM 1 급.
Parcel	2017	Devon Govett	JS → Rust (2.x)	0-config 강조.
esbuild	2020	Evan Wallace	Go	매우 빠른 트랜스파일·번들.
swc	2019	강동윤	Rust	Babel 대체 트랜스파일러. Next.js 가 채택.
Vite	2020	Evan You	JS + esbuild + Rollup	dev 는 ESM 네이티브, prod 는 Rollup.
Turbopack	2022	Vercel	Rust	webpack 의 후계. Next.js dev 기본.
Bun	2023 (1.0)	Jarred Sumner	Zig	런타임+패키지+번들.
Rolldown	2024	VoidZero (Evan You)	Rust	Rollup 의 Rust 재작성. Vite prod 후계 목표.

언어가 굵게 표시된 도구들이 "JS 도구를 더 빠른 시스템 언어로 다시 짜는" 흐름입니다.

4. 트랜스파일러와 번들러 분리

도구	트랜스파일	번들	dev 서버
Babel	O	X	X
swc	O	(단순)	X
esbuild	O	O	(간이)
Rollup	(플러그인)	O	(플러그인)
webpack	(loader)	O	webpack-dev-server
Vite	(esbuild + swc)	(Rollup)	O
Turbopack	(swc)	O	O

Vite 는 dev 와 prod 에 다른 번들러를 쓴다는 점이 특징입니다. dev 에서는 esbuild 로 의존성을 한 번 사전 번들하고 사용자 코드는 ESM 네이티브로 띄웁니다. prod 에서는 Rollup 으로 묶습니다 (향후 Rolldown 으로 전환 진행).

5. dev 와 prod 가 다른 이유

번들 한 큰 파일은 prod 에서 압축·캐시·HTTP/2 멀티플렉싱과 잘 맞습니다. dev 에서는 같은 작업이 매번 시작 시간을 잡아먹습니다. 브라우저가 ESM 을 이해한 이후 dev 에서는 번들을 거의 안 하고 모듈을 그대로 보내는 길이 빨라졌습니다. 이 분리가 Vite 의 정체입니다.

6. 프레임워크와의 짝

• Tauri — 프레임워크 자체가 번들러를 정하지 않지만 템플릿 기본은 Vite 입니다.
• Next.js — 9 부터 webpack 위에 자체 빌드를 얹었고 13~15 에서 dev 에 Turbopack 을 점진 도입, 15+ 에서는 dev 의 기본입니다. prod 는 webpack 과 Turbopack 의 공존을 거쳐 점진 전환 중.
• Vite — 자체 dev 서버 + Rollup → Rolldown 으로의 prod 전환 진행 중. VoidZero (2024 설립, Evan You) 가 Vite · Rolldown · oxc 같은 도구를 한 회사에서 봅니다.

7. 컴파일러로서의 프레임워크

번들러를 가볍게 두고 컴파일러가 더 많은 일을 하는 갈래도 있습니다.

• Svelte 컴파일러 — 컴포넌트를 직접 효율적인 imperative JS 로 변환. 런타임 거의 없음.
• SolidJS — JSX 를 fine-grained reactive 코드로 변환.
• Astro — island 단위로 hydration 을 분할.

이 도구들도 내부적으로 esbuild · Vite · Rollup 에 의존하지만 사용자 입장에서는 "프레임워크가 결정합니다".

8. Module Federation

webpack 5 (2020) 의 Module Federation 은 빌드 산출물끼리 런타임에 코드를 나눠 가지는 모델입니다. 큰 조직의 micro-frontend 진영에서 자주 거론됩니다.

9. Vite 프로젝트와 tsconfig

pnpm create vite@latest my-app -- --template react-ts
cd my-app
pnpm install
pnpm dev      # esbuild 사전 번들 + ESM dev 서버
pnpm build    # Rollup 으로 prod 번들

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler"   // Vite/Next 등 번들러 환경
  }
}

"Bundler" (TS 5.0+) 는 번들러가 import 해석을 하는 환경에 맞춥니다. Node-only 라면 "NodeNext".

10. 자주 걸리는 자리

CommonJS 와 ESM 의 혼용 — 대부분의 함정은 이 경계에 있습니다. 라이브러리가 CJS 만 export 하면 트리 셰이킹이 잘 안 됩니다. package.json 의 "exports" · "type": "module" 필드를 봅니다.

__dirname · require — ESM 모듈에는 없습니다. import.meta.url 로 대체합니다.

ts → js 의 디버깅 — 번들러가 sourcemap 을 정확히 만들지 않으면 에러 스택이 빌드 결과를 가리킵니다. sourcemap: true 를 dev 에서 항상 켭니다.

트리 셰이킹이 안 되는 패턴 — side effect 가 있는 모듈 (전역 등록 등) 은 제거되지 않습니다. package.json 의 "sideEffects": false 를 라이브러리에서 명시.

dev 와 prod 결과 차이 — Vite 의 dev 는 ESM, prod 는 번들이라 모듈 해석 결과가 다를 수 있습니다. 큰 라이브러리에서 가끔 차이가 드러납니다 (dual-package hazard).

webpack 5 의 polyfill 제거 — crypto · path 같은 Node 모듈을 자동으로 채워주던 4 의 동작이 5 에서 제거됐습니다. 명시적 fallback 이 필요합니다.

Turbopack 의 prod 호환 — dev 에서 Turbopack, prod 에서 webpack 인 단계가 있으면 차이를 검증합니다.

하고픈 말

번들러의 흐름은 "더 빠른 도구로 더 적은 일을" 쪽입니다. dev 에서 ESM 네이티브 + esbuild 사전 번들이 표준이 되어 가고 있습니다. prod 측은 Rolldown · Turbopack 의 Rust 재작성이 진행 중이고 1~2 년 안에 패러다임이 또 한 번 갈릴 가능성이 있습니다.

Next

• tauri-mobile-admob
• sqlite-local

webpack · Vite · Rollup · esbuild · swc · Turbopack · Rolldown · Module Federation · TC39 Modules 를 참고합니다.