프론트엔드
Webpack 빌드에 날개를 달아줄 Esbuild-Loader
두줄요약
Webpack의 Babel-Loader와 Terser를 Esbuild 기반 구성으로 교체해 빌드 시간을 비교했습니다. 개발·프로덕션·CI 환경에서 Esbuild 적용 시 상대적인 빌드 시간 단축을 확인했습니다.
문제 상황
- 소스 일부 수정에도 엔트리부터 의존성 그래프를 재구성하고 전체 리빌드를 수행하는 Webpack 오버헤드
- Babel-Loader 전처리와 프로덕션 Minify 과정에서 누적되는 빌드 시간
해결 방법
- Babel-Loader 대신 Esbuild-Loader를 적용해 Transpile 단계 가속
- Terser 대신 ESBuildMinifyPlugin을 사용해 프로덕션 Minify 단계 가속
- Transpiler와 Minifier만 교체한 설정으로 컴파일 완료 시간 비교
성능/운영 포인트
- Esbuild-Loader 적용 시 개발 서버 초기 구동 평균 3399.8ms에서 2031.4ms로 단축
- HMR 리빌드 평균 199.2ms에서 102ms, 로컬 프로덕션 빌드 평균 5617.4ms에서 2238.2ms로 단축
- GitHub Actions CI 프로덕션 빌드 평균 17101.6ms에서 5599.8ms로 단축
적용해볼 점
- 모듈 번들러 전체 교체보다 로더·플러그인 설정 교체부터 검증하는 접근
- 프로젝트별 사이드 이펙트 확인 후 Esbuild-Loader 전환 검토
