피드로 돌아가기
컬리 기술블로그Frontend
원문 읽기
컬리 기술블로그빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
컬리의 5년 된 CMS 프로젝트가 Webpack4에서 Vite로 전환해 빌드 시간 48% 단축, 개발 서버 시작 속도 460배 개선, 번들 크기 81% 감소
AI 요약
Context
2020년 구축한 CMS 프로젝트가 5년간 거의 동일한 기술 스택(React 16, Webpack4, TypeScript 4.4)을 유지하며 규모만 증가했다. 40개 이상의 도메인과 30개 이상의 동적 라우트로 성장하면서 Webpack4 기반의 빌드 프로세스가 최소 6GB 이상의 메모리를 요구하게 되었고, CI 환경에서 OOM(Out of Memory) 에러로 배포가 실패하기 시작했다.
Technical Solution
- Webpack4에서 Vite 6로 번들러 전환: 기존 JavaScript 기반 AST 파싱 방식에서 스트리밍 처리 방식으로 변경
- 순환 참조 제거: barrel 파일의 절대경로 import를 상대경로로 변경해 Scope Hoisting 최적화와 SplitChunksPlugin 복잡도 감소
- TypeScript 타입 체킹 메모리 제한: ForkTsCheckerWebpackPlugin에 memoryLimit을 4GB로 설정
- Node.js 버전 업그레이드: 16.18.0에서 22.14.0으로 업그레이드해 Vite 6.x 호환성 확보
- 환경변수 처리 방식 변경: process.env.REACT_APP_에서 import.meta.env.VITE_로 마이그레이션
Impact
- 빌드 시간: 평균 54.28초에서 28.21초로 48% 단축
- 개발 서버 시작: 47초에서 102ms로 460배 개선
- 빌드 메모리 요구사항: 최소 6GB에서 기존 수준으로 감소
- 프로덕션 번들 크기: 81% 감소
- Webpack 설정 파일: 538줄에서 123줄로 77% 감소
- 코드 삭제: 210,000 라인 제거
- 빌드 안정성: CI 환경에서 OOM 에러 없이 배포 성공
Key Takeaway
기술 부채는 선택이 아닌 필연적 비용이므로 정기적인 의존성 업그레이드가 필수다. 특히 체감에 기반한 의사결정이 아닌 메모리 사용량, 빌드 시간 등의 정확한 측정이 레거시 마이그레이션의 근거가 되어야 한다.
실천 포인트
5년 이상 기술 스택을 유지해온 레거시 프론트엔드 프로젝트에서 CI 빌드 실패나 극도로 높은 메모리 요구(6GB 이상)가 발생할 때는, 임시방편으로 메모리 할당량을 증가시키기보다 번들러 마이그레이션을 검토해야 한다. 특히 순환 참조 제거와 최신 번들러 도입 조합은 메모리 40% 이상 감소와 빌드 속도 2배 이상 개선을 동시에 달성할 수 있다.