똑똑하게 브라우저 Polyfill 관리하기

오래된 브라우저에서 최신 JavaScript API를 사용하려면 Polyfill이 필요하지만, 모든 Polyfill을 일괄 제공하면 최신 브라우저에도 불필요한 스크립트가 전달됩니다. 먼저 @babel/preset-env의 브라우저 targets를 설정해 지원 범위 밖의 Polyfill을 빌드에서 제외할 수 있지만, 최신 브라우저에 필요한 것만 전달하는 문제까지 해결하지는 못합니다. 토스는 browserslist-useragent와 core-js-compat으로 User-Agent별 Polyfill 목록을 계산하고, esbuild로 필요한 모듈만 묶는 자체 제공 시스템을 만들었습니다. 이 방식으로 오래된 브라우저 지원과 최신 브라우저의 불필요한 다운로드 감소를 함께 추구할 수 있으며, User-Agent 해석 실패 시 대체 대상과 비표준 기능 제외 같은 예외 처리도 중요합니다.

• Polyfill을 무조건 전부 포함하면 최신 브라우저에도 불필요한 JavaScript를 내려보내 성능에 부담을 줄 수 있다.
• @babel/preset-env의 targets를 실제 지원 브라우저에 맞춰 설정하면 빌드 시 불필요한 Polyfill을 줄일 수 있다.
• 브라우저별로 필요한 기능을 다르게 제공하려면 User-Agent를 해석해 Polyfill 목록을 동적으로 구성할 수 있다.
• core-js-compat으로 목록을 계산하고 esbuild로 번들링하면 자체 Polyfill 제공 서버를 구현할 수 있다.
• User-Agent를 해석할 수 없는 경우의 대체 대상과 실험적인 esnext 기능 제외 등 예외 처리도 고려해야 한다.