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

이 게시물은 Vite의 공식 플러그인인 @vitejs/plugin-legacy를 활용하여 구버전 브라우저, 특히 Chrome 73 미만 및 Safari 12 이전 버전을 지원하는 방법을 설명합니다.

문제 인식 및 해결

• 배민앱 장바구니 웹뷰에서 구버전 브라우저의 문법 에러로 인한 흰 화면 문제 발생
• Object.fromEntries is not a function 에러를 중심으로 문제 진단
• targets 설정만으로는 폴리필이 충분하지 않아 modernPolyfills 옵션 추가 필요

레거시 플러그인의 동작 원리

• Native ESM 지원 유무에 따라 모던 청크와 레거시 청크를 선택적으로 로드
• 모던 브라우저에서는 최신 문법을, 레거시 브라우저에서는 폴리필과 이전 버전 코드를 실행

modernPolyfills 옵션 활용

• 모던 청크에도 필요한 폴리필을 포함하여 Chrome >= 64, Safari >= 12 버전에서 발생하는 문법 에러 해결
• true 설정 시 필요한 모든 폴리필 자동 포함, 번들 크기 증가하지만 유지보수에 유리