esbuild: 속도와 한계
esbuild를 독립형 번들러로 사용하고, webpack보다 몇 자릿수나 빠른 이유와 플러그인 및 타입과 관련된 현재의 한계를 이해합니다.
esbuild: 속도와 한계은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
esbuild란 무엇인가요?
esbuild는 Go로 작성된 번들러이자 압축기입니다. 네이티브 멀티스레딩과 시작 오버헤드가 전혀 없기 때문에 JavaScript 기반 번들러보다 10~100배 빠릅니다. Evan Wallace(Figma)가 만들었습니다.
속도 벤치마크
React 소스(약 6MB)를 번들링할 때 esbuild는 약 0.4초, Webpack은 약 9초, Rollup은 약 6초, Parcel은 약 10초가 걸립니다. 빠른 이유는 Go로 컴파일된다는 점, 병렬 처리, 단계 사이에 AST 변환이 없다는 점, 단순한 아키텍처입니다.
esbuild 직접 사용하기
CLI에서 설치하고 실행합니다.
npm install -D esbuild
npx esbuild src/app.ts \
--bundle \
--outfile=dist/app.js \
--minify \
--sourcemap \
--target=es2020 \
--platform=browser프로그래밍 방식의 API
더 세밀하게 제어하려면 빌드 스크립트에서 사용합니다.
// build.js
import { build } from 'esbuild';
await build({
entryPoints: ['src/app.ts'],
bundle: true,
outfile: 'dist/app.js',
minify: true,
sourcemap: true,
target: ['es2020'],
platform: 'browser',
define: { 'process.env.NODE_ENV': '"production"' }
});tsc 없이 TypeScript 사용하기
esbuild는 TypeScript 구문을 제거하여 .ts를 .js로 변환하는 작업을 tsc보다 훨씬 빠르게 수행합니다. 유형 검사는 하지 않으므로, 이를 위해서는 별도로 tsc --noEmit을 실행해야 합니다.
# Strip types and bundle in one go:
npx esbuild src/index.ts --bundle --outfile=dist/index.js
# Type-check separately (slower, can run in parallel):
npx tsc --noEmit핫 리로드를 지원하는 개발 서버
esbuild에는 context API를 통한 감시 모드와 HMR을 지원하는 내장 개발 서버가 있습니다.
import { context } from 'esbuild';
const ctx = await context({
entryPoints: ['src/app.ts'],
bundle: true,
outdir: 'dist'
});
await ctx.watch();
await ctx.serve({ servedir: 'public', port: 8000 });플러그인 아키텍처
esbuild는 두 가지 주요 훅을 사용하는 플러그인을 지원합니다. onResolve는 모듈 해석을 가로채고, onLoad는 해석된 모듈의 콘텐츠를 제공합니다.
const myPlugin = {
name: 'env',
setup(build) {
build.onResolve({ filter: /^env$/ }, () => ({ path: 'env', namespace: 'env-ns' }));
build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
contents: JSON.stringify(process.env),
loader: 'json'
}));
}
};로더
esbuild에는 js, ts, jsx, tsx, json, css, text, base64, dataurl, file, binary용 로더가 내장되어 있습니다. CSS 지원은 번들링에만 해당하며 CSS 모듈이나 PostCSS는 지원하지 않습니다. 플러그인이나 다른 도구를 사용해야 합니다.
Rollup/Vite와 비교한 제한 사항
1) 플러그인 생태계가 더 작습니다. 2) CSS 처리 흐름이 최소한으로 제공되어 CSS 모듈, PostCSS, 기본 제공 전처리기를 지원하지 않습니다. 3) 프레임워크용 HMR이 없습니다. React/Vue 같은 프레임워크에는 프레임워크별 HMR이 필요합니다. 4) 트리 셰이킹 경고나 분석 기능이 없습니다. 5) 복잡한 SSR 구성에는 아직 덜 성숙했습니다.
esbuild가 특히 빛나는 경우
1) 라이브러리 번들링(단일 진입점, 프레임워크 없음). 2) Lambda/작업자 패키징(최소한의 콜드 스타트). 3) Vite/tsup 내부의 보조 도구(Vite/tsup은 내부적으로 TypeScript 변환에 사용). 4) tsc에서 더 빠른 TypeScript 처리 흐름으로 마이그레이션할 때.
다른 도구 내부의 esbuild
Vite는 개발 중 TS/JSX 변환과 node_modules 사전 번들링에 esbuild를 사용합니다. tsup은 라이브러리 번들링에 esbuild를 사용합니다. Rollup에는 esbuild 플러그인이 있습니다. 많은 도구가 esbuild의 속도와 자체 사용자 경험을 결합합니다.
tsup — 라이브러리에 적합한 esbuild 래퍼
npm 라이브러리를 게시할 때 tsup은 합리적인 기본값으로 esbuild를 감쌉니다. CJS + ESM + .d.ts를 생성하고, 개발 중 감시하며, 간단한 구성을 사용할 수 있습니다.
# package.json
"scripts": { "build": "tsup src/index.ts --format esm,cjs --dts" }번들 크기의 절충점
esbuild는 빠르게 압축하지만 압축 강도는 Terser보다 약간 낮습니다. 크기가 빌드 속도보다 중요하다면 최종 결과물을 최대한 작게 만들기 위해 후처리 단계에서 Terser를 실행하면 됩니다.
빠른 확인
esbuild는 TypeScript 컴파일에 tsc를 대신 사용할 수 있습니다. 그렇다면 esbuild가 tsc와 달리 하지 않는 작업은 무엇인가요?
복습: esbuild
Go 기반 번들러로, JS 번들러보다 10~100배 빠릅니다. CLI와 프로그래밍 방식의 API를 제공합니다. TS 구문을 제거하지만 유형 검사는 하지 않으므로 tsc --noEmit을 실행해야 합니다. 플러그인 훅은 onResolve와 onLoad입니다. 제한 사항은 빈약한 플러그인 생태계, 최소한의 CSS 처리 흐름, 프레임워크 HMR 부재입니다. 라이브러리, Lambda/작업자, Vite/tsup 내부에서 사용하기 좋습니다. npm 라이브러리에는 tsup 래퍼를 사용하면 됩니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 41
- 레슨
- 163
자주 묻는 질문
“esbuild: 속도와 한계” 강의는 무료인가요?
네 — “esbuild: 속도와 한계” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“esbuild: 속도와 한계”에서 뭘 배우나요?
esbuild를 독립형 번들러로 사용하고, webpack보다 몇 자릿수나 빠른 이유와 플러그인 및 타입과 관련된 현재의 한계를 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“esbuild: 속도와 한계” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.