frontend
Turbopack 완벽 가이드 — webpack을 대체하는 Next.js 번들러
Rust로 작성된 Turbopack이 webpack보다 최대 700배 빠른 이유와 Next.js 15에서 Turbopack을 활용하는 방법을 상세히 정리하였다.
- ·Turbopack 개발사: Vercel (2022년 공개)
- ·언어: Rust 기반 (JavaScript 런타임 불필요)
- ·HMR 속도: Next.js 앱 기준 webpack 대비 최대 700배 빠름
- ·Next.js 15부터 개발 서버 기본 번들러로 채택
Next.js 13 기반 대규모 프로젝트에서 webpack HMR이 8초 이상 걸리는 문제로 개발 생산성이 심각하게 저하되었다. Turbopack으로 전환한 직후 HMR이 200ms 이내로 줄어들어 개발 흐름이 완전히 달라졌다. 다만 일부 webpack 전용 플러그인이 동작하지 않아 대체재를 찾는 데 추가 시간이 소요되었으며, 커스텀 SWC 플러그인 설정에서 공식 문서가 미흡한 부분을 직접 파악해야 하는 어려움이 있었다.
Turbopack이란 무엇인가
Rust로 구현한 증분 번들러
Turbopack은 Vercel이 개발한 Rust 기반 자바스크립트 번들러로, 2022년 Next.js Conf에서 처음 공개되었다. 기존 webpack이 JavaScript로 작성된 것과 달리 Turbopack은 Rust의 강력한 병렬 처리와 메모리 안전성을 기반으로 설계되었다. 핵심 개념은 증분 계산(incremental computation)으로, 변경된 파일과 그 의존성만 재계산하여 불필요한 작업을 최소화한다. 이로 인해 프로젝트 규모가 커질수록 성능 이점이 더욱 두드러진다. webpack은 모든 모듈 그래프를 다시 순회하는 방식으로 동작하는 반면, Turbopack은 이미 계산된 결과를 캐시하고 변경된 부분만 정밀하게 추적하여 재처리한다.
webpack과의 성능 비교
Vercel이 공개한 벤치마크에 따르면 Next.js 애플리케이션에서 Turbopack의 콜드 스타트 시간은 webpack 대비 평균 4.7배 빠르고, HMR(Hot Module Replacement) 속도는 최대 700배까지 빠르다. 대규모 코드베이스에서 webpack은 HMR 업데이트에 수 초가 걸리는 반면, Turbopack은 밀리초 단위로 처리한다. 이 차이는 파일 수가 많을수록 더 벌어지는데, 5,000개 이상의 모듈을 보유한 프로젝트에서는 실질적인 개발 생산성 차이로 이어진다. 다만 프로덕션 빌드는 Next.js 15 기준 아직 webpack을 병행 사용하며, Turbopack 프로덕션 빌드는 안정화 단계에 있다.
Next.js 15에서 Turbopack 사용하기
개발 서버 활성화 방법
Next.js 15에서는 next dev --turbopack 플래그를 추가하면 Turbopack 개발 서버가 활성화된다. package.json의 dev 스크립트를 수정하는 것이 가장 일반적인 방법이다. Next.js 15.1부터는 별도 플래그 없이도 next dev 명령만으로 Turbopack이 기본 번들러로 동작하도록 변경되었다. 기존 webpack 설정인 next.config.js의 webpack 콜백은 Turbopack에서 동작하지 않으므로, Turbopack 전용 설정 블록인 experimental.turbo를 사용해야 한다.
마이그레이션 시 주의사항
webpack 기반 프로젝트를 Turbopack으로 전환할 때 가장 많이 마주치는 문제는 커스텀 webpack 플러그인 호환성이다. babel-loader를 사용하던 프로젝트는 SWC로 전환해야 하며, webpack DefinePlugin을 사용하던 경우 Next.js의 env 설정으로 대체해야 한다. CSS Modules와 PostCSS는 기본적으로 지원되지만, SASS 같은 전처리기는 별도 설정이 필요하다. 또한 require.context처럼 webpack 전용 API를 사용하는 레거시 코드는 동적 import 패턴으로 교체해야 한다.
Turbopack의 내부 아키텍처
Turbo Engine: 함수 수준 캐싱
Turbopack의 핵심은 Turbo Engine이라는 캐싱 시스템이다. 함수 호출 결과를 세밀하게 캐시하여, 동일한 입력에 대해 함수를 재실행하지 않는다. 파일이 변경되면 해당 파일에 의존하는 함수들만 선택적으로 무효화되고 재계산된다. 이 방식은 전통적인 번들러가 파일 단위로 캐시를 관리하는 것보다 훨씬 세밀하여, 대형 프로젝트에서의 점진적 갱신 성능이 뛰어나다. Rust의 안전한 병렬 처리 덕분에 멀티코어 CPU를 최대한 활용하며 동시에 여러 파일을 변환할 수 있다.
자주 묻는 질문
Turbopack은 webpack을 완전히 대체하나요?+
Next.js 15 기준으로 개발 서버는 Turbopack이 기본이지만, 프로덕션 빌드는 아직 webpack을 사용합니다. Turbopack 프로덕션 빌드는 현재 베타 단계입니다.
기존 webpack 설정을 Turbopack에서 그대로 사용할 수 있나요?+
아니요. webpack 콜백 설정은 Turbopack에서 무시됩니다. experimental.turbo 설정 블록을 통해 Turbopack 전용 설정을 별도로 구성해야 합니다.
관련 글
Vite 6 완벽 가이드 — 환경 API와 Rolldown 통합으로 빌드 혁신
Vite 6의 환경 API(Environment API), Rolldown 통합, 런타임 독립성 강화, 플러그인 마이그레이션 전략을 실무 예제와 함께 정리하였다.
Next.js 15 Partial Prerendering 완벽 가이드 — 정적과 동적 렌더링의 통합
Next.js 15에서 도입된 Partial Prerendering(PPR)의 개념, Suspense 경계 설계, 캐싱 전략 변경사항을 실무 관점에서 정리하였다.
Bun 런타임 완벽 가이드 — Node.js를 대체하는 올인원 JavaScript 도구
Bun의 런타임, 패키지 매니저, 번들러, 테스트 러너 기능과 Node.js 대비 성능 차이, 실전 마이그레이션 전략을 상세히 정리하였다.