대결: esbuild 0.21 vs. SWC 1.5 vs. Babel 8, TypeScript 5.6 코드 트랜스파일링

Source: Dev.to

위의 링크에 있는 전체 텍스트를 제공해 주시면, 해당 내용을 한국어로 번역해 드리겠습니다. (코드 블록과 URL은 그대로 유지됩니다.)

esbuild 0.21 vs SWC 1.5 vs Babel 8: TypeScript 5.6 트랜스파일링 대결

TypeScript 5.6은 안정적인 데코레이터, const 타입 매개변수, 향상된 좁히기 등 오래 기다려온 기능들을 도입하지만, 이 코드를 트랜스파일하려면 그 속도를 따라갈 수 있는 빌드 도구가 필요합니다. 우리는 세 가지 인기 트랜스파일러—esbuild 0.21, SWC 1.5, 그리고 곧 출시될 Babel 8—를 비교하여 속도, 출력 품질, 호환성 측면에서 가장 균형 잡힌 결과를 제공하는 것이 어느 것인지 살펴봅니다.

테스트 설정 및 방법론

우리는 TypeScript 5.6 전용 기능을 많이 사용하는 12 000줄 규모의 실제 TypeScript 코드베이스를 사용했습니다: stage 3 데코레이터, const 타입 매개변수, satisfies 연산자 엣지 케이스, 그리고 새로운 Array.prototype 메서드. 10회 실행(중앙값 보고) 동안 네 가지 주요 지표를 측정했습니다:

• 트랜스파일링 속도(콜드 및 워밍 빌드)
• 최소화된 출력 번들 크기(각 도구의 기본 최소화 사용)
• 소스맵 정확도(source-map 라이브러리를 통해 검증)
• TypeScript 5.6 기능 지원(15개 테스트 케이스에 대한 통과/실패)
• 트랜스파일링 중 최대 메모리 사용량

esbuild 0.21

esbuild는 Go의 동시성 모델을 활용하여 번개처럼 빠른 성능으로 명성을 쌓아왔습니다. 0.21 버전에서는 TypeScript 5.6의 const 타입 매개변수에 대한 네이티브 지원과 메타데이터가 포함된 데코레이터 처리 개선이 추가되었습니다.

Pros

• 가장 빠른 콜드 빌드 시간: 142 ms (테스트 코드베이스 기준)
• 가장 낮은 메모리 사용량: 피크 89 MB
• 내장된 압축 및 소스맵 생성 (추가 플러그인 불필요)
• 우리 테스트에서 TypeScript 5.6 기능 100 % 지원

Cons

• 출력 크기가 SWC보다 크지만 Babel 8보다 작음 (1.2 MB 압축 후)
• Babel에 비해 제한된 플러그인 생태계
• 레거시 Babel 플러그인이나 커스텀 변환 파이프라인을 지원하지 않음

SWC 1.5

SWC (Speedy Web Compiler)는 Rust 기반 트랜스파일러로, 속도 면에서 esbuild와 경쟁하면서 @swc/plugin‑transform 생태계를 통해 Babel 플러그인과의 호환성을 확대합니다. 1.5 버전은 TypeScript 5.6 데코레이터에 대한 완전한 지원과 타입 전용 임포트에 대한 향상된 트리‑쉐이킹을 추가했습니다.

Pros

• 가장 작은 최소화된 출력: 테스트 코드베이스 기준 1.1 MB
• 두 번째로 빠른 콜드 빌드: 167 ms
• TypeScript 5.6 기능 100 % 지원
• SWC 플러그인 API를 통해 대부분의 Babel 플러그인과 호환

Cons

• esbuild보다 높은 메모리 사용량: 피크 124 MB
• 소스맵 정확도가 약간 낮음 (매핑 정확도 98 % vs. esbuild의 100 %)
• 복잡한 데코레이터 메타데이터와 관련된 가끔 발생하는 엣지 케이스

Babel 8

Babel 8 (현재 베타) 은 기존의 오랜 Babel 툴체인을 최신 TypeScript 5.6 네이티브 지원으로 현대화하고, 레거시 폐기된 API를 제거하며 Babel 7 대비 성능을 약 40 % 향상시킵니다. 또한 맞춤 변환을 위한 Babel만의 뛰어난 플러그인 생태계를 그대로 유지합니다.

Pros

• 가장 작은 비압축 출력, 그리고 압축 출력은 SWC와 비슷한 수준 (1.1 MB)
• TypeScript 5.6 기능 100 % 지원 (플래그 뒤에 숨겨진 실험적 기능 포함)
• 가장 방대한 플러그인 생태계: 수천 개의 커뮤니티 변환 제공
• 복잡한 엣지 케이스에 대한 최고의 소스맵 정확도

Cons

• 가장 느린 콜드 빌드: 892 ms (≈esbuild보다 6배 느림)
• 가장 높은 메모리 사용량: 피크 312 MB
• 기본 TypeScript 설정에 대해 esbuild/SWC보다 더 많은 구성 필요
• 베타 상태라 가끔 파괴적 변경이 발생할 수 있음

벤치마크 결과

어느 것을 선택해야 할까요?

• Use esbuild 0.21 작은‑중간 규모 프로젝트에서 순수 속도와 낮은 리소스 사용을 우선시하거나, 커스텀 Babel 플러그인이 필요하지 않을 경우.
• Use SWC 1.5 esbuild에 근접한 속도와 더 작은 출력 크기, 기존 Babel 플러그인과의 호환성을 원할 경우.
• Use Babel 8 특수한 커뮤니티 플러그인에 의존하거나, 최대 수준의 소스맵 정확도가 필요하거나, 이미 Babel 생태계에 투자한 경우(안정적인 릴리스가 나올 때).

결론

대부분의 팀이 TypeScript 5.6 코드를 트랜스파일할 때, esbuild 0.21이 속도와 효율성 면에서 왕좌를 차지하며, SWC 1.5은 출력 크기 최적화 측면에서 근접한 2위에 올랐습니다. Babel 8은 플러그인 유연성의 금본위제로 남아 있지만, 성능 지연으로 인해 대규모 코드베이스나 빠른 반복 사이클에는 덜 적합합니다. TypeScript가 계속 진화함에 따라 세 도구 모두 새로운 기능을 지원할 준비가 잘 되어 있지만, esbuild의 단순함과 속도가 이번 대결에서 우위를 제공합니다.