Vite로 구버전 브라우저 지원하기

문제 상황

• Vite로 전환한 뒤 구버전 Safari·Chrome 웹뷰에서 화면 진입 시 흰 화면이 발생하는 문제
• 원인은 Chrome 73 미만 환경의 Object.fromEntries is not a function 문법/호환성 오류
• 배민앱 장바구니처럼 웹뷰 기반 서비스에서 구버전 지원 포기 시 사용자·매출 영향 우려

원인 분석

• @vitejs/plugin-legacy의 targets 설정만으로는 폴리필이 자동 포함되지 않는 점
• 모던 브라우저 범위 안에서도 import.meta, dynamic import, async generator 같은 기능 차이 존재
• Native ESM 지원 여부와 실제 문법 지원 범위를 함께 고려해야 하는 구조

해결 방법

• modernPolyfills 옵션에 es.object.from-entries를 추가해 모던 청크에 폴리필 포함
• 이후 유지보수성과 일괄 대응을 위해 modernPolyfills: true로 확장
• 최종적으로 targets와 modernPolyfills를 함께 설정해 모던·레거시 브라우저 분기 처리

적용해볼 점

• 구버전 브라우저 이슈는 실제 대상 기기에서 Chromium 스냅샷으로 재현 확인
• 레거시 플러그인 사용 시 targets만이 아니라 폴리필 포함 여부까지 점검
• 번들 크기와 호환성 사이에서 운영 관점의 균형 검토