August 3, 2025

💣 폴리필(polyfill)을 과도하게 사용한 번들 비대화: 초기 로딩 지연과 사용자 경험 저하

JavaScript

성능

웹표준

빌드&번들링

호환성

React

Summary

모든 브라우저를 지원하기 위해 폴리필을 무분별하게 적용하면 번들 크기가 증가하고 성능이 저하됩니다. Browserslist, 동적 폴리필 로딩, 코드 분할을 통해 필요한 폴리필만 선별적으로 적용하여 최적의 사용자 경험을 제공해야 합니다.

Why Wrong?

최신 JavaScript 기능을 광범위하게 사용하면서 구형 브라우저를 지원하기 위해 모든 기능을 폴리필하면 번들 크기가 기하급수적으로 증가합니다. 불필요한 폴리필은 초기 로딩 시간을 지연시키고, 사용자 경험을 저하시키며, 특히 저사양 기기나 느린 네트워크 환경에서 더욱 심각한 문제를 야기합니다. 핵심은 필요한 폴리필만 선별적으로 적용하고, 최신 브라우저에서는 폴리필을 제거하여 최적의 성능을 유지하는 것입니다.

How to Fix?

Targeted Polyfilling: Babel의 useBuiltIns 옵션과 Browserslist를 사용하여 실제 필요한 폴리필만 포함하도록 설정합니다. Browserslist는 프로젝트에서 지원해야 하는 브라우저 범위를 정의하고, Babel은 이를 기반으로 필요한 폴리필만 자동으로 추가합니다.
Dynamic Polyfill Loading: Intersection Observer API나 User-Agent 문자열을 사용하여 브라우저 기능을 감지하고, 필요한 경우에만 폴리필을 동적으로 로딩합니다. polyfill.io와 같은 서비스를 사용하여 CDN을 통해 폴리필을 제공하고, 브라우저별로 최적화된 폴리필 세트를 제공할 수도 있습니다.
Modern Syntax Transpilation: 최신 JavaScript 문법(예: ES modules)을 사용하여 코드를 작성하고, Babel과 같은 트랜스파일러를 사용하여 구형 브라우저에서 실행 가능한 코드로 변환합니다. 이때, 최신 브라우저를 위한 코드는 가능한 한 변환을 최소화하여 성능을 최적화합니다.
Code Splitting: 코드를 여러 청크로 분할하고, 초기 로딩에 필요한 코드만 먼저 로딩합니다. 폴리필 관련 코드를 별도의 청크로 분리하여 필요한 경우에만 로딩하면 초기 로딩 시간을 단축할 수 있습니다.

Before Code (Bad)

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage', // 모든 폴리필 포함
      corejs: 3,
      targets: '> 0.25%, not dead' // 모든 브라우저 지원
    }]
  ]
};

// index.js
const promise = Promise.resolve(123);
const array = [1, 2, 3].includes(2);

// ... 나머지 코드

After Code (Good)

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage', // 필요한 폴리필만 포함
      corejs: 3,
      targets: {
        chrome: '79', // 특정 브라우저 버전만 지원
        firefox: '72',
        safari: '13'
      }
    }]
  ]
};

// index.js
const promise = Promise.resolve(123);
const array = [1, 2, 3].includes(2);

// ... 나머지 코드
```

```javascript
// 동적 폴리필 로딩 예시
if (!('IntersectionObserver' in window)) {
  import('intersection-observer').then(() => {
    // Intersection Observer를 사용하는 코드
  });
}

Babel의 `useBuiltIns` 옵션은 Browserslist와 함께 사용되어 필요한 폴리필만 자동으로 포함하도록 설정하는 방법을 제공합니다. 이는 번들 크기를 최적화하고 불필요한 폴리필을 제거하는 데 중요합니다.

https://babeljs.io/docs/babel-preset-env#usebuiltins

Browserslist는 프로젝트에서 지원해야 하는 브라우저 범위를 정의하고, Babel과 PostCSS와 같은 도구가 이를 기반으로 코드를 최적화하도록 지원합니다. 이는 폴리필 및 트랜스파일링 전략을 조정하는 데 핵심적인 역할을 합니다.

https://github.com/browserslist/browserslist

polyfill.io는 User-Agent 헤더를 기반으로 필요한 폴리필만 제공하는 서비스입니다. 이는 브라우저별로 최적화된 폴리필 세트를 제공하여 번들 크기를 줄이고 성능을 향상시키는 데 도움이 됩니다.

https://polyfill.io/