똑똑하게 브라우저 Polyfill 관리하기
toss.tech
프론트엔드 개발자에게 하위 브라우저 호환성 문제는 피할 수 없는 과제입니다. 모든 서비스에는 구형 브라우저를 사용하는 사용자가 존재하며, 이를 무시할 수 없기 때문인데요.
이런 문제를 해결하기 위해 Polyfill을 사용하지만 Polyfill을 사용하는 데도 단점이 있습니다. 불필요한 Polyfill 스크립트까지 다운로드하게 되는 경우가 생기며, 이는 JavaScript 코드의 크기를 증가시키고 사용자 경험(UX)에 영향을 미칠 수 있기 때문인데요. 특히 최신 브라우저를 사용하는 사용자에게도 필요 없는 Polyfill이 포함되어 로드 속도를 저하시킬 수 있습니다.
이러한 문제를 해결하기 위해, 토스 에서 동적으로 필요한 Polyfill만 제공하는 자체 Polyfill 서비스를 구축한 블로그 아티클을 재미있게 읽었습니다. 이 접근 방식은 브라우저 환경에 따라 꼭 필요한 Polyfill만 제공함으로써, 불필요한 스크립트 로드를 방지하고 성능을 극대화하는데요.
구현 방식
User-Agent 기반 브라우저별 맞춤형 Polyfill 생성
클라이언트(브라우저)가 Polyfill 서버에 요청을 보낼 때, 요청 헤더에 포함된 User-Agent 정보를 기반으로 브라우저 정보를 추출합니다.
이 과정에서 browserslist-useragent
라이브러리를 사용해 브라우저와 필요한 기능을 매핑합니다.
esbuild를 활용한 Polyfill 스크립트 생성
생성된 Polyfill 목록을 기반으로 core-js
모듈에서 필요한 Polyfill을 가져와 JavaScript 코드를 생성합니다.
esbuild
를 활용해 Polyfill 스크립트를 하나로 묶고, 크기를 줄이기 위해 압축 및 최적화를 수행합니다.
Polyfill 서버 배포
생성된 Polyfill 스크립트는 Node.js 서버 또는 AWS Lambda 같은 서버리스 환경에 배포됩니다.
클라이언트가 서버에 요청을 보내면 해당 브라우저에 필요한 Polyfill만 포함된 최적화된 스크립트를 실시간으로 반환합니다.
사실 번들 크기의 최적화는 모든 프로젝트에서 최우선 과제가 아닐 수 있습니다. 그러나 저속 네트워크나 저사양 기기를 사용하는 환경에서는 번들 크기에 다라 사용자 경험에 직접적인 영향을 미칠 수 있습니다. 특히 이러한 환경일 경우 사용자들은 로딩 속도에 더욱 민감하게 반응하므로, 동적 Polyfill 서비스를 통한 최적화는 의미 있는 개선이 될 수 있습니다.
또한 이러한 접근 방식은 개발과 사용자 경험 모두에서 win-win 전략이 될수 있다고 느꼇습니다. 개발자는 최신 JavaScript 기능을 제약 없이 활용할 수 있고, 사용자는 자신의 브라우저 환경에 관계없이 항상 최적화된 성능과 안정적인 서비스를 경험할 수 있기 때문입니다.
https://toss.tech/article/smart-polyfills
다음 내용이 궁금하다면?
이미 회원이신가요?
2025년 1월 1일 오전 1:01
개
... 더 보기첫
... 더 보기1. "최고의 경지에 오른 사람의 노하우나 디테일은 말로 설명하기가 어려워요. 어깨너머로만 배울 수 있어요. 그리고 그 작은 차이가 완성도를 판가름하죠.
태초에 모든 동물은 바다에서 살았다. 바다가 동물이 살기 좋은 환경이었던 것이다. 그런데, 동물 사이에 먹이 사슬이 형성되었고, 힘이 없는 동물들은 척박한 곳으로 밀려났다. 그곳이 바로 강이다. 처음에는 강에서 살기 힘들었지만, 성공적으로 적응하는 동물들이 생겨났고, 그래서 강에도 생태계가 형성되었다.
... 더 보기