esbuild (esbuild) | KAITRUST AI 백과사전

상세 설명

esbuild는 Go 언어로 작성된 초고속 JavaScript/TypeScript 번들러입니다. Evan Wallace(Figma CTO)가 개발했으며, 기존 번들러 대비 10~100배 빠른 속도를 자랑합니다.

JavaScript로 작성된 기존 번들러(Webpack, Rollup)와 달리, Go의 병렬 처리와 효율적인 메모리 사용으로 대규모 프로젝트도 순식간에 빌드합니다. Vite가 개발 모드에서 esbuild를 사용하는 것으로도 유명합니다.

초고속 빌드: Webpack 대비 100배 이상 빠름
번들링 + 트랜스파일링: TypeScript, JSX를 별도 도구 없이 처리
Tree Shaking: 사용하지 않는 코드 자동 제거
코드 분할: 동적 import로 청크 분리
Source Map: 디버깅용 소스맵 생성 지원

다만 플러그인 생태계가 Webpack만큼 풍부하지 않아, Vite처럼 개발 모드용으로 사용하거나 단순 번들링에 주로 활용됩니다.

코드 예제

CLI 사용

# 설치
npm install esbuild

# 단일 파일 번들링
npx esbuild app.js --bundle --outfile=out.js

# 프로덕션 빌드 (minify + sourcemap)
npx esbuild src/index.ts --bundle --minify --sourcemap --outfile=dist/bundle.js

# TypeScript + React JSX
npx esbuild app.tsx --bundle --loader:.tsx=tsx --outfile=out.js

JavaScript API 사용

import * as esbuild from 'esbuild';

// 기본 번들링
await esbuild.build({
    entryPoints: ['src/index.ts'],
    bundle: true,
    minify: true,
    sourcemap: true,
    target: ['es2020'],
    outfile: 'dist/bundle.js',
});

// 코드 분할 (여러 청크)
await esbuild.build({
    entryPoints: ['src/index.ts'],
    bundle: true,
    splitting: true,
    format: 'esm',
    outdir: 'dist',
});

Watch 모드 (개발용)

const ctx = await esbuild.context({
    entryPoints: ['src/index.ts'],
    bundle: true,
    outfile: 'dist/bundle.js',
});

// 파일 변경 감지 및 자동 리빌드
await ctx.watch();

// 개발 서버 (선택사항)
await ctx.serve({
    servedir: 'public',
    port: 3000,
});

실무 대화 예시

개발자

"빌드가 30초나 걸리는데 esbuild 적용하면 어떨까요?"

시니어

"esbuild 자체는 빠르긴 한데, Webpack의 복잡한 설정 다 대체할 수 있어? CSS 모듈이나 환경 변수 처리 같은 거."

개발자

"그건 좀 제한적이에요. 그래서 Vite를 쓰는 게 나을 것 같아요. 개발 모드는 esbuild로 빠르게, 프로덕션은 Rollup으로 안정적으로 빌드하니까요."

주의사항

플러그인 생태계 제한

Webpack만큼 풍부한 플러그인 생태계가 없습니다. 복잡한 로더나 플러그인이 필요하면 다른 도구 고려가 필요합니다.

ES5 타겟 미지원

ES6+ 이상만 타겟팅 가능합니다. IE11 등 구형 브라우저 지원이 필요하면 추가 트랜스파일링이 필요합니다.

TypeScript 타입 체크 미지원

트랜스파일링만 하고 타입 체크는 하지 않습니다. 타입 검사는 tsc나 IDE에서 별도로 수행해야 합니다.

esbuild

상세 설명

코드 예제

실무 대화 예시

주의사항

관련 용어

더 배우기