FEInterview Prep

build-tools · medium priority

esbuild & Rollup

Go/Rust 기반 번들러, Vite 내부 구조, Tree Shaking

advanced 난이도5시간토스당근카카오네이버
시작 전
이해도
매우 낮음

학습 개요

탄생 배경

쉬운 설명

복잡한 개념을 실생활 비유로 설명합니다.

“요리 비유: esbuild는 전자레인지(매우 빠르지만 기능 제한), Rollup은 오븐(느리지만 정교한 요리 가능), Vite는 전자레인지로 재료를 데우고 오븐으로 마무리하는 셰프”

번들러는 수백 개의 파일을 브라우저가 효율적으로 로드할 수 있는 형태로 합치는 도구다. Go/Rust 네이티브 도구가 빠른 이유는 JS의 단일 스레드 한계를 벗어나 병렬 처리가 가능하기 때문이다.

핵심 개념

속도의 비결

Go로 작성 + 병렬 처리 + 캐싱 + 단일 패스 파싱

1000개 파일 번들: Webpack ~30초 vs esbuild ~0.3초

지원 기능

TypeScript, JSX, Tree Shaking, Code Splitting, CSS 번들링 기본 내장

한계

Webpack 플러그인 생태계 미지원, 복잡한 코드 변환 제한적

esbuild API 직접 사용javascript
1import { build } from 'esbuild';
2

3await build({
4  entryPoints: ['src/index.ts'],
5  bundle: true,
6  minify: true,
7  splitting: true,
8  format: 'esm',
9  outdir: 'dist',
10  target: ['es2020', 'chrome90'],
11  define: { 'process.env.NODE_ENV': '"production"' },
12  plugins: [/* 커스텀 플러그인 */],
13});

실무 적용

어떤 상황에서 사용하는가

React 컴포넌트 라이브러리를 npm 패키지로 배포할 때

어떻게 적용하는가

1) Rollup으로 CJS/ESM/UMD 세 형태 빌드, 2) peer dependency는 external 처리, 3) package.json에 exports 필드로 조건부 진입점 설정, 4) sideEffects: false로 Tree Shaking 최적화

흔한 실수와 안티패턴

  • CSS import를 sideEffects에 명시하지 않아 스타일이 사라지는 문제
  • peer dependency를 번들에 포함시켜 React가 두 번 로드되는 문제
  • CommonJS로 빌드해 소비자 앱에서 Tree Shaking이 안 되는 문제
  • TypeScript 타입 선언 파일(.d.ts) 미포함으로 타입 에러 발생

면접 질문

중급토스당근

답변 방향 힌트

ES Module 정적 분석과 CommonJS의 차이

반드시 언급할 키워드

  • 정적 import/export 분석
  • ES Module에서만 효과적
  • sideEffects 설정
  • dead code elimination

예상 꼬리 질문

  • Vite가 개발 서버와 프로덕션 빌드에서 다른 도구를 사용하는 이유는?
  • esbuild와 SWC의 차이는?

학습 자료

이전

← Auth Strategies

다음

Deployment Strategies →