Webpack 빌드에 날개를 달아줄 Esbuild-Loader

간단 소개

Esbuild-Loader를 사용하여 Webpack 빌드 속도를 향상시키는 방법과 성능 비교 결과를 제시합니다.

AI Summary

Esbuild-Loader 소개
- Webpack의 Babel-Loader를 대체하여 빌드 속도를 향상시키는 Esbuild-Loader를 소개합니다.
- Esbuild는 Transpilation과 Minification 단계에서 더 빠른 대안을 제공합니다.
Webpack 빌드 시간 비교
- Dev Server StartTime: Esbuild-Loader가 Babel-Loader보다 평균적으로 더 빠른 시작 시간을 보여줍니다.
- HMR: Esbuild-Loader가 Babel-Loader보다 Hot Module Replacement 속도가 빠릅니다.
- Production Build Time: 로컬 및 Github Actions CI 환경 모두에서 Esbuild-Loader가 Babel-Loader + Terser 조합보다 훨씬 빠른 빌드 속도를 나타냅니다. 특히 Minify 절차에서 큰 차이를 보입니다.
Esbuild가 빠른 이유
- Go 언어로 작성되어 JavaScript보다 빠릅니다. Go는 컴파일 언어이고, JavaScript는 인터프리터 언어이기 때문입니다.
- 멀티 스레드 기반으로 동작하여 병렬 처리가 가능합니다. JavaScript는 싱글 스레드 기반입니다.