5년 된 CMS 프로젝트의 Webpack 4에서 Vite로 전환기

2020년부터 유지된 CMS가 React 16, TypeScript 4.4, MobX 5, Material-UI 4, Webpack 4 위에서 성장하면서 한계에 부딪혔다. 도메인 40개 이상, 동적 라우트 30개 이상, 설정 파일 538줄, 의존성 300개 이상으로 커진 뒤에는 CI/CD 빌드가 OOM으로 실패하기 시작했다.

메모리를 4GB에서 8GB로 늘리는 임시방편도, filesystem cache와 splitChunks 최적화도 근본 해결이 되지 않았다. 실제로는 순환 참조, Webpack 4의 구조적 메모리 부담, TypeScript 타입 체킹 비용이 겹치며 최소 6GB 이상의 메모리가 필요했고, 4GB 제한에서는 FATAL ERROR: ... heap out of memory가 발생했다.

전환 대상은 Vite, Parcel, Rsbuild였고, 최종적으로 Vite를 선택했다. 이유는 다음과 같다.

• ESM 기반 개발 서버로 전체 번들링 없이 필요한 모듈만 제공
• Rollup 기반 프로덕션 빌드와 활발한 플러그인 생태계
• MobX decorator, React 16, MUI 4 같은 레거시 조합을 Babel 설정으로 수용 가능

마이그레이션 결과 설정은 538줄에서 121줄로 77% 감소했고, Webpack 관련 패키지 9개 이상을 제거한 대신 Vite 관련 핵심 패키지만 추가했다. 별도 qa-vite-conversion 브랜치에서 진행하며, querystring을 qs로 alias 처리하고, react-csv는 Babel로 예외 트랜스파일했으며, dayjs는 optimizeDeps.include로 사전 번들링했다.

성과는 명확했다.

• Production 빌드 시간: 54.28초 → 28.21초, 48% 감소
• 개발 서버 시작 시간: 약 47초 → 102ms, 460배 개선
• 번들 크기: 57MB → 11MB, 81% 감소
• 빌드 메모리: 8GB 필요 → 4GB 이하로 안정화
• 코드 210,000라인 삭제

Node.js도 16.18.0에서 22.14.0으로 올려 최신 LTS 환경을 확보했다. 결국 오래된 설정과 누적된 기술 부채를 정리하지 않으면 문제는 빌드 실패 같은 형태로 터진다는 점, 그리고 측정과 점진적 전환이 레거시 마이그레이션의 핵심이라는 점을 확인했다.