프론트엔드
Vite로 구버전 브라우저 지원하기
두줄요약
Vite 레거시 플러그인으로 구버전 Safari와 Chrome의 흰 화면 문제를 해결한 사례를 다루었습니다. targets 설정만으로는 부족해 modernPolyfills를 함께 조정한 과정도 설명했습니다.
문제 상황
- 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만이 아니라 폴리필 포함 여부까지 점검 - 번들 크기와 호환성 사이에서 운영 관점의 균형 검토
