빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환

5년간 성장한 CMS가 Webpack 4 빌드 중 OOM을 겪자, 메모리 증설과 캐시·청크 최적화만으로는 해결되지 않아 Vite 전환을 결정했습니다. 순환 참조를 정리하고, MobX 데코레이터와 레거시 라이브러리 호환성을 Babel 플러그인·alias·사전 번들링 설정으로 맞췄으며, 별도 브랜치에서 검증했습니다. 그 결과 설정 파일은 538줄에서 121줄로 줄고, 프로덕션 빌드는 48% 단축됐으며 개발 서버 시작은 47초에서 102ms로 빨라졌습니다. 체감이 아닌 측정으로 원인을 확인하고, 기술 부채를 안전하게 갚는 과정이 성능과 유지보수성을 함께 개선한다는 교훈을 얻었습니다.

• 번들러 전환 전 메모리 사용량과 빌드 시간을 측정해 문제의 임계치와 개선 효과를 확인하세요.
• 배럴 파일의 절대경로 import로 생긴 순환 참조는 상대경로 import로 정리할 수 있습니다.
• Vite는 Node.js 내장 모듈 폴리필을 자동 제공하지 않으므로 브라우저 호환 대체 라이브러리나 alias가 필요할 수 있습니다.
• 레거시 라이브러리의 빌드 호환성 문제는 해당 패키지만 Babel로 변환하는 식으로 범위를 좁혀 해결할 수 있습니다.
• 별도 브랜치에서 전환하고 검증한 뒤 병합하면 기존 환경으로 돌아갈 수 있어 마이그레이션 위험을 낮출 수 있습니다.