빌드 시간 85% 단축, Module Federation 호환성을 유지한 Vite 마이그레이션

Context

CRA 기반의 legacy React 애플리케이션에서 심각한 Dependabot 보안 취약점 발생. Webpack의 복잡한 설정 계층과 느린 빌드 속도로 인한 개발 생산성 저하. Host 애플리케이션과의 Runtime contract 유지라는 제약 조건 존재.

Technical Solution

• Vite 전환 전 Babel macro 및 CRA 전용 패키지 등 기존 툴체인 의존성 제거
• Node.js built-in 모듈 의존성을 가진 라이브러리를 식별하여 브라우저 호환 구조로 수정
• vite.config.ts 단일 설정 파일로 빌드, 개발, 테스트 설정을 통합하여 관리 복잡도 해소
• Jest를 Vitest로 교체하여 별도의 Babel 설정 없이 동일한 Path alias 공유 및 테스트 실행 속도 개선
• base 경로 설정 최적화를 통해 Remote hosting 환경에서 Chunk import 404 오류 방지
• Host의 로딩 시퀀스를 재현하는 Local federation harness 구축으로 배포 없이 런타임 검증 수행

Impact

• Cold-start 빌드 시간 63.4s에서 9.3s로 단축
• Lockfile 내 약 10k 라인 제거
• 모든 Open Dependabot 보안 취약점 해결

Key Takeaway

번들러 교체 시 단순 도구 변경보다 Host-Remote 간의 런타임 계약(Runtime contract) 분석이 우선되어야 함. 도구 전환으로 발생하는 린트 에러 등 부수적 문제는 별도 PR로 분리하여 마이그레이션의 모멘텀을 유지하는 전략이 필요함.