프론트엔드
빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
두줄요약
Webpack 4 기반 CMS의 OOM 문제를 순환 참조와 구조적 한계 관점에서 분석했습니다. Vite 전환으로 빌드 시간·번들 크기·개발 서버 시작 속도를 크게 개선했습니다.
문제 상황
- 5년간 유지된 Webpack 4 기반 CMS에서 CI 빌드 OOM과 배포 후 화면 미노출 발생
- 40개 이상 도메인, 30개 이상 동적 라우트, 300개 이상 의존성으로 확장된 레거시 프로젝트
원인 분석
- 배럴 파일의 순환 참조로 Scope Hoisting·청크 최적화·TypeScript 타입 추론 복잡도 증가
- 전체 의존성 그래프와 AST를 메모리에 유지하는 Webpack 4의 구조적 한계
- 빌드 성공 최소 메모리 6GB, 기존 CI 환경의 반복적 OOM
해결 방법
- 별도 브랜치에서 Webpack 4를 Vite로 전환하고 React 16·MobX 5 decorator·MUI 4 호환 설정 적용
- Node.js 내장 모듈 폴리필 부재, CSS 문법, react-csv, dayjs 초기화 순서 이슈별 alias·Babel·사전 번들링 설정
- Node.js 16에서 22로 업그레이드하고 환경변수를 import.meta.env.VITE_* 형식으로 전환
성능/운영 포인트
- 프로덕션 빌드 평균 54.28초에서 28.21초로 48% 단축, 개발 서버 시작 약 47초에서 102ms로 개선
- 번들 크기 57MB에서 11MB로 81% 감소, 설정 파일 538줄에서 121줄로 간소화
- 빌드 메모리 요구량 8GB에서 4GB 이하로 축소, CI 빌드 안정성 확보
