프론트엔드
빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
두줄요약
5년 된 CMS의 Webpack4 빌드가 CI에서 OOM으로 무너져 Vite로 전환했습니다. 전환 후 빌드와 개발 서버가 크게 빨라지고 설정도 단순해졌습니다.
문제 상황
- 5년간 유지된 CMS 프로젝트의 Webpack4 기반 빌드 환경에서 CI/CD 빌드 OOM 실패 발생
- 도메인·라우트·의존성이 크게 늘어난 반면 설정과 패키지는 거의 그대로라 메모리 한계 노출
원인 분석
- 배럴 파일과 절대경로 import로 인한 순환 참조가 최적화 실패와 타입 체킹 복잡도 증가로 연결
- Webpack4의 전체 의존성 그래프 메모리 상주 구조가 대규모 프로젝트에서 부담으로 작용
해결 방법
- Webpack4를 Vite로 전환해 ESM 기반 개발 서버와 esbuild 사전 번들링 활용
- 불필요한 Webpack 패키지 제거, Babel·alias·optimizeDeps 설정으로 레거시 호환성 확보
성능/운영 포인트
- 설정 파일 538줄에서 121줄로 축소, 번들 크기 81% 감소
- 프로덕션 빌드 48% 단축, 개발 서버 시작 460배 개선, 4GB 이하 메모리로 OOM 해소