Webpack4에서 Vite로 CMS 프로젝트 전환기

이 게시물은 5년 된 CMS 프로젝트에서 Webpack4의 OOM(Out of Memory) 문제를 해결하기 위해 Vite로 전환한 과정을 공유합니다.

전환 배경과 문제점

• 오랜 기간 유지된 Webpack4 기반 빌드에서 메모리 과다 사용 및 빌드 실패 발생
• 순환 참조와 Webpack4의 구조적 한계가 메모리 문제의 주요 원인
• 다양한 최적화 시도에도 문제 해결 불가

Vite 선택 및 마이그레이션

• ESM 기반 개발 서버와 활발한 생태계가 강점
• 레거시 스택과의 호환성 확보
• 설정 파일 간소화, 불필요한 패키지 제거, 여러 호환성 이슈 해결

성과 및 교훈

• 빌드 시간 48% 단축, 개발 서버 시작 속도 460배 개선
• 번들 크기 81% 감소, 코드 210,000라인 삭제
• 기술 부채 해소와 정확한 측정의 중요성 강조, 점진적 전환 권장