esbuild는 Turbopack을 대체하는 것일까?

---

esbuild?

• Go 언어로 작성된 가장 빠른 웹 애플리케이션 빌드 도구이자 자바스크립트 모듈 번들러다.

TurboPack을 대체하는 것인가?

• 아니다. 두 도구는 프로젝트 내에서 서로 완전히 다른 영역(Scope)의 번들링을 독립적으로 담당한다.
  • Turbopack의 역할
    • 대상 : app/ 디렉토리 내부의 페이지, 컴포넌트, 스타일시트 등 Next.js 메인 애플리케이션 코드 전체
    • 역할 : 개발 환경(next dev --turbo)과 프로덕션 빌드 시 웹팩(Webpack)을 대체하여 프로젝트의 메인 소스 코드를 초고속으로 빌드
  • esbuild의 역할
    • 대상 : PWA 기능을 위한 서비스 워커 스크립트 파일 단 하나
    • 역할 : Serwist가 브라우저 백그라운드에서 독립적으로 실행될 sw.js 파일을 컴파일하고 번들링할 때 내부 유틸리티로 esbuild를 사용

왜 각각 따로 쓸까?

• 실행 환경의 격리(샌드박스)
  • 서비스 워커는 웹 페이지와 완전히 분리된 별도의 스레드(Worker 글로벌 스코프)에서 동작한다.
  • window 객체나 React 컴포넌트 같은 메인 앱의 코드가 서비스 워커에 섞여 들어가면 실행 에러가 난다. 따라서 메인 앱 빌드 파이프라인(Turbopack)과 완전히 격리된 별도의 미니 번들러가 필요하다.
• ✨ Serwist의 아키텍처 특성
  • PWA 라이브러리인 Serwist는 서비스 워커 파일(sw.ts 등)을 standalone 형태로 빠르게 컴파일하기 위해 자체적으로 esbuild를 내장하거나 종속성으로 요구한다.
  • 즉, 개발자가 메인 빌드 도구로 Turbopack을 선택했더라도, Serwist 플러그인이 제 역할을 하기 위해 배후에서 esbuild를 돌리는 구조다.