Webpack → Vite: 번들러 마이그레이션 이야기

간단 소개

AB180의 Webpack에서 Vite로의 번들러 마이그레이션 경험 공유: 빌드 속도 개선, 개발 경험 향상, 그리고 얻게 된 교훈.

AI Summary

Webpack에서 Vite로의 번들러 마이그레이션 배경
- 기존 Webpack 사용 환경에서 코드 베이스 증가로 인한 빌드 속도 저하 및 개발 경험 저하 문제가 발생.
- ES Module 지원 및 에버그린 브라우저 사용 증가 등 웹 환경 변화에 따라 새로운 번들러 필요성 대두.
Vite 도입 과정 및 효과
- esbuild 기반 번들러 성능 확인 후 Vite 채택, 빠른 개발 경험과 높은 확장성을 목표.
- Vite의 Dependencies와 Source Code 분리 빌드 전략을 통해 초기 로딩 속도 개선 및 HMR 지원.
- 환경 변수 설정, 메모리 부족 문제 등 마이그레이션 과정에서 발생한 이슈 해결.
마이그레이션 결과 및 교훈
- 빌드 시간 36% 단축, Netlify 빌드 비용 절감, 팀원들의 개발 만족도 향상 등 긍정적인 결과 도출.
- 트렌드 변화에 따른 기술 스택 변화의 중요성 인식, 좋은 접근성이 좋은 개발 환경을 만든다는 교훈 획득.