Webpack esbuild 적용 - 빌드 시간 개선

최근 사업건 회고

최근 들어온 사업 중에 어드민 모듈을 맡게 되었습니다.
기존에 webpack으로 구성하던 프로젝트들과 별개로 The State of JS에서 봐왔던 vite라는 번들러의 esbuild 에 대해 경험해보자라는 의견을 내게 되었고 vite 환경으로 구성하게 되었습니다.

vite 프로젝트 구성

사실 많은 글들에서도 보았듯이 vite 프로젝트를 구성하기에는 cra 만큼이나 명령어만으로도 쉽게 구성할 수 있었습니다. (생략)

vite를 사용해보며 느낀 간단한 장단점

• Vite
  Vue 창시자 Evan You가 만든 새로운 프론트엔드 도구로 프랑스어로 "빠르다(Quick)"를 의미하며 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구 입니다.

[장점]

• 정말 빠르다고 느꼈습니다. 위에서 설명한 만큼 실제 사용했을 때 정말 말도 안되는 속도로 느껴지면서 "뭐야, 벌써 빌드가 되었어?" 라는 느낌이 들었습니다.
• reload 타임이 확연하게 줄었습니다. 기존에 파일을 변경하게 된 경우 변경된 파일에 대해 다시 reload 하게 됩니다. 하지만 vite를 사용하면서 저장하는 순간 변경된 부분이 반영이 되는 부분에 있어서 개발하는 시간에 대해 많이 아낄 수 있다는 것을 느꼈습니다.

[단점]

• 캐싱된 데이터의 변경시 즉각적으로 반영되지 않았습니다.
  프로젝트를 개발하면서 다른 팀의 모듈에 의존성을 갖게 되다보니, 다른 팀 모듈의 버전 변동으로 자주 설치를 하게 됩니다. 이 같은 경우 ex) core-0.0.1 -> core-0.0.2 로 변경되어 버전을 올리고 다시 vite 를 재기동 하게 되었지만, 여전히 0.0.1 버전의 코드가 캐싱되어 남아있고, 이를 해결하기 위해 .vite 폴더 하위를 제거하고 다시 의존성을 설치하는 등의 번거로움이 있었습니다.

적용

위의 경험으로 느꼈던 vite를 현재 운영하고 있는 캘린더 프로젝트에도 적용을 해보면 어떨까라는 생각을 갖게 되었습니다. 지난 포스트에서도 몇번 적은적이 있었지만, webpack과 rollup의 환경으로 캘린더 앱 자체를 빌드하거나, 캘린더 앱의 위젯 컴포넌트를 배포하거나의 환경으로 구성되어 있습니다.

적용 이유

webpack의 devServer를 사용하다 보니 코드 변경이 일어날 때 3초에서 최대 5초까지 reload 되면서 생산성이 많이 떨어진다고 생각하였고, vite 를 사용하면서 얻게 된 장점을 적용해보면 어떨까하는 마음에 적용하게 되었습니다.

먼저 적용하기에 앞서 기존 webpack 으로 구성된 프로젝트에 esbuild를 어떻게 적용하는지 살펴보았습니다.

생각보다 적용법은 되게 간단하였습니다.

기존

적용 후

기존에 적용하였던 babel-loader 와 ts-loader를 대체하는 것이었습니다. 또한 esbuild-loader 에서 제공하는 EsbuildPlugin을 사용하여 minimizer를 적용하였습니다.

빌드시간 비교

적용 전 빌드시간

적용 후 빌드시간

63868ms 에서 17906ms로 약 71.94% 정도 개선되었습니다.
또한 assets 빌드시간도 3204ms 에서 502ms 로 약 82% 정도 개선 된 것으로 보여지게 되었습니다.

마치며

급하게 정해보다보니 많은 테스트를 못해보기도 했고, 또한 더 최적화 및 고도화를 진행해보진 못했지만 프로젝트를 운용하면서 점차 개선된 부분이 있다면 추가적인 글을 기술 하겠습니다.
좀 더 나은 의견이나 좋은 사례들 있으면 공유 주시면 더욱 적용해서 발전시키고 싶습니다.