Babel Preset Env로 폴리필 최적화하기

문제 상황

기존 프로젝트는 babel-preset-es2015와 babel-polyfill을 통째로 사용하고 있었다. IE11 지원을 위해 어쩔 수 없이 polyfill을 전부 포함시켰는데, Chrome이나 최신 브라우저에서도 동일한 번들을 제공하고 있었다.

번들 분석 결과 polyfill만 약 80KB를 차지하고 있었다.

babel-preset-env 도입

babel-preset-env는 타겟 환경에 맞춰 필요한 변환만 수행하는 preset이다. .babelrc 설정을 다음과 같이 변경했다.

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      },
      "useBuiltIns": true
    }],
    "react"
  ]
}

useBuiltIns 옵션을 활성화하면 전역으로 import 'babel-polyfill'을 넣어도 필요한 polyfill만 import된다.

결과

• 번들 사이즈: 약 30KB 감소
• 최신 브라우저에서는 더 적은 polyfill 적용
• IE11에서는 여전히 정상 동작

주의사항

targets 설정이 정확해야 한다. 지원 브라우저 범위를 잘못 설정하면 런타임 에러가 발생할 수 있다. browserslist 쿼리를 활용해 명확하게 정의하는 것을 권장한다.

또한 useBuiltIns: true는 전역 polyfill을 사용하므로, 라이브러리 개발 시에는 transform-runtime을 고려해야 한다.