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

Webpack4 기반 CMS의 OOM 위기

• 5년 된 컬리 CMS 프로젝트는 Webpack4 기반의 레거시 스택으로 성장하며 OOM(Out of Memory) 에러 발생.
• 순환 참조 및 Webpack4의 구조적 한계가 주원인으로, CI/CD 빌드 실패 및 6GB 이상 메모리 요구.
• 임시방편의 한계로 번들러 전환이 필수적임을 인지. Vite로의 성공적인 마이그레이션
• ESM 기반 개발 서버, 활발한 생태계, 레거시 스택과의 호환성을 고려하여 Vite를 선택.
• Node.js 내장 모듈, CSS 문법, 'react-csv' 호환성 등 다양한 기술 이슈를 해결하며 전환 완료.
• 설정 파일 77% 간소화, 불필요한 패키지 제거, Node.js 22로 업그레이드. 전환 후 얻은 성과 및 교훈
• 빌드 시간 48% 감소, 개발 서버 시작 460배 개선, 번들 크기 81% 감소 등 정량적 성과 달성.
• 기술 부채 관리의 중요성, 측정 기반 의사결정, 점진적 전환의 안전성을 핵심 교훈으로 제시.
• OOM 위기를 개발 환경 개선의 기회로 활용.