esbuild-loader를 사용하였을 때, 정말 빠른 빌드 속도를 체험할 수 있었습니다. 이는 개발환경에서 작업을 할 시에도 당연시 적용되기에 큰 이점을 줄 수 있습니다. esbuild-loader로 마이그레이션하는 작업 또한 굉장히 쉽기 때문에 적용해봤습니다. 웹팩 공식문서에서도 개발 환경에서 eval을 추천하고, inline-source-map에 비해서 번들 사이즈 또한 작아진 것을 확인할 수 있었습니다. 그 이유는 inline-source-map의 경우, 번들된 JS에 인라인 형식으로 작성되기 때문에 자연스레 번들 사이즈가 커진 것으로 예상합니다.
결론
최종적으로 esbuild-loader와 eval-source-map을 이용해 초기 빌드 속도와 빌드된 번들 사이즈 모두 개선할 수 있었습니다.
2. Production 환경
before
로더 : babel-loader
소스맵 : cheap-module-source-map
mifnify : terser-webpack-plugin
초기 빌드 속도 : 16초
웹팩 최종 빌드된 번들 사이즈 : 612KB
after
로더 : esbuild-loader
소스맵 : none
minify : ESBuildMinifyPlugin
초기 빌드 속도 : 10초
웹팩 최종 빌드된 번들 사이즈 : 377KB
Why? 위와 같이 적용했을까요?
esbuild-loader를 사용하였을 때, 정말 빠른 빌드 속도를 체험할 수 있었습니다. 배포환경에서는 빠른 빌드 속도가 사용자에게 더 최신의 리소스를 제공해줄 수 있기에 굉장히 중요하기에 적용하였습니다. 소스맵은 제거하였습니다. 그 이유는 소스맵의 역할을 보면 알 수 있는데요. 소스맵은 최종 번들링 된 파일과 원본 파일을 링킹하는 역할을 하여서, 난독화된 번들링 된 파일에서 에러가 발생하거나 디버깅을 할 때 소스맵을 사용하면 굉장히 유용합니다. 근데 왜 배포 환경에서는 소스맵을 제거하였을까? 배포 환경에서는 디버깅을 할 필요가 없다고 판단하였습니다. 웹팩 공식문서에도 배포 환경에서는 none을 추천합니다. minify는 esbuild-loader에서 default로 제공해주는 ESBuildMinifyPlugin을 사용하였습니다. terser-webpack-plugin과 비교하였을 때 압축력에 대해서는 크게 차이가 없는 것 같아 보입니다.
결론
최종적으로 esbuild-loader, 소스맵 none, ESBuildMinifyPlugin을 이용해서 초기 빌드 속도와 빌드된 번들 사이즈 모두 개선할 수 있었습니다.
sanaandmomo
commented
1 year ago
Issues
어떻게 해결했나요?
1. Development 환경
before
after
Why? 위와 같이 적용했을까요?
esbuild-loader를 사용하였을 때, 정말 빠른 빌드 속도를 체험할 수 있었습니다. 이는 개발환경에서 작업을 할 시에도 당연시 적용되기에 큰 이점을 줄 수 있습니다. esbuild-loader로 마이그레이션하는 작업 또한 굉장히 쉽기 때문에 적용해봤습니다. 웹팩 공식문서에서도 개발 환경에서
eval을 추천하고, inline-source-map에 비해서 번들 사이즈 또한 작아진 것을 확인할 수 있었습니다. 그 이유는 inline-source-map의 경우, 번들된 JS에 인라인 형식으로 작성되기 때문에 자연스레 번들 사이즈가 커진 것으로 예상합니다.결론
최종적으로 esbuild-loader와 eval-source-map을 이용해 초기 빌드 속도와 빌드된 번들 사이즈 모두 개선할 수 있었습니다.
2. Production 환경
before
after
Why? 위와 같이 적용했을까요?
esbuild-loader를 사용하였을 때, 정말 빠른 빌드 속도를 체험할 수 있었습니다. 배포환경에서는 빠른 빌드 속도가 사용자에게 더 최신의 리소스를 제공해줄 수 있기에 굉장히 중요하기에 적용하였습니다. 소스맵은 제거하였습니다. 그 이유는 소스맵의 역할을 보면 알 수 있는데요. 소스맵은 최종 번들링 된 파일과 원본 파일을 링킹하는 역할을 하여서, 난독화된 번들링 된 파일에서 에러가 발생하거나 디버깅을 할 때 소스맵을 사용하면 굉장히 유용합니다. 근데 왜 배포 환경에서는 소스맵을 제거하였을까? 배포 환경에서는 디버깅을 할 필요가 없다고 판단하였습니다. 웹팩 공식문서에도 배포 환경에서는
none을 추천합니다. minify는 esbuild-loader에서 default로 제공해주는 ESBuildMinifyPlugin을 사용하였습니다. terser-webpack-plugin과 비교하였을 때 압축력에 대해서는 크게 차이가 없는 것 같아 보입니다.결론
최종적으로 esbuild-loader, 소스맵 none, ESBuildMinifyPlugin을 이용해서 초기 빌드 속도와 빌드된 번들 사이즈 모두 개선할 수 있었습니다.
reference
https://intrepidgeeks.com/tutorial/faster-deployment-build https://fe-developers.kakaoent.com/2022/220707-webpack-esbuild-loader/
close #501