Webpack 빌드에 날개를 달아줄 Esbuild-Loader
프론트엔드
Webpack 빌드에 날개를 달아줄 Esbuild-Loader
두줄요약
Webpack의 Babel-Loader와 Terser를 Esbuild-Loader·Minify로 교체해 빌드 시간을 비교했습니다.\n개발 서버와 CI 프로덕션 빌드에서 Esbuild 조합의 유의미한 단축 효과를 확인했습니다.
문제 상황
- Webpack의 엔트리 기반 의존성 그래프 재구성과 전체 리빌드 오버헤드
- Babel-Loader 재전처리로 인한 개발 서버와 프로덕션 빌드 시간 소모
해결 방법
- Babel-Loader를 Esbuild-Loader로 교체해 트랜스파일 단계 가속
- Terser 대신 ESBuildMinifyPlugin 적용으로 프로덕션 최소화 단계 가속
성능/운영 포인트
- 개발 서버 최초 구동 평균 3399.8ms에서 2031.4ms로 단축
- HMR 평균 199.2ms에서 102ms로 단축
- 로컬·GitHub Actions 프로덕션 빌드에서 최소화 절차 포함 시 큰 시간 차이
적용해볼 점
- 번들러 전체 교체보다 로더·플러그인 설정 교체 후 빌드 시간과 사이드 이펙트 검증
- Esbuild의 Go 기반 사전 컴파일과 멀티스레드 처리 특성 활용
