esbuild 플레이그라운드

esbuild 는 타입을 검사하지 않고 그냥 지웁니다(초고속). 타입 → 순수 JS.

JSX 를 React.createElement / jsx() 호출로 바꿉니다. jsx 옵션을 automatic↔transform 으로 바꿔보세요.

공백·주석 제거, 변수명 단축, 상수 폴딩. 크기 변화를 하단 통계로 확인하세요.

최신 문법(async/await, 옵셔널 체이닝, ??)을 옛 문법으로 낮춥니다. target 을 es5 로도 바꿔보세요.

process.env.NODE_ENV 같은 식별자를 빌드 타임 리터럴로 바꿔 죽은 코드를 제거하기 쉽게 만듭니다.

<script> 태그로 바로 쓸 수 있는 즉시실행함수(IIFE)로 감쌉니다. cjs 로도 바꿔보세요.

jsx=preserve 는 JSX 를 변환하지 않고 남깁니다(다음 단계 도구에 넘길 때). automatic 과 비교해보세요.

enum 은 런타임 객체로, const enum 은 인라인으로 컴파일됩니다. 출력에서 차이를 확인하세요.

소스맵을 켜면 결과 끝에 //# sourceMappingURL 주석이 base64 로 붙습니다. 원본↔출력 매핑 데이터입니다.

같은 코드를 minify 껐다 켜며 하단 "출력 크기" 통계를 비교하세요. 긴 식별자일수록 절감 폭이 큽니다.

async generator + for-await 를 es2017 로 낮추면 esbuild 가 헬퍼를 삽입합니다. target 을 바꿔 헬퍼 변화를 보세요.

index 가 math·format 두 모듈을 import → esbuild 가 하나의 파일로 합칩니다.

utils 는 export 3개인데 index 는 1개만 씁니다. 번들에 unusedA/unusedB 가 사라졌는지 확인하세요.

ESM 소스를 <script> 용 IIFE 로 번들합니다. 포맷 토글을 esm↔iife↔cjs 로 바꿔 결과를 비교하세요.

even.ts 와 odd.ts 가 서로를 import 합니다. esbuild 가 순환을 처리해 하나로 묶는 것을 확인하세요.

index 가 heavy 모듈을 지연 import 하고, styles 는 CSS 문자열을 export 합니다. 코드 스플리팅 없이 단일 파일로 묶습니다.

minify + tree-shaking 을 껐다 켜며 하단 번들 크기를 비교하세요. 안 쓰는 큰 함수가 얼마나 빠지는지 체감할 수 있습니다.