Babel Preset Env로 폴리필 크기 줄이기

문제

프로젝트에서 babel-preset-es2015, babel-preset-es2016을 사용 중이었다. 번들 크기가 커지면서 IE11 지원을 위해 포함된 polyfill들이 부담스러워졌다. 모던 브라우저 사용자들도 불필요한 코드를 다운로드하고 있었다.

babel-preset-env 도입

babel-preset-env는 타겟 브라우저 환경에 따라 필요한 트랜스파일만 수행한다. .babelrc를 수정했다.

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

useBuiltIns 옵션을 켜면 babel-polyfill을 import했을 때 필요한 polyfill만 포함된다. Chrome 최신 버전에서는 Promise, Array.from 등의 polyfill이 제외되고, IE11에서만 포함되는 식이다.

결과

• 번들 크기: 850KB → 590KB (30% 감소)
• 빌드 시간 큰 변화 없음
• 브라우저별 테스트 통과

주의사항

useBuiltIns를 사용하려면 entry point에서 import 'babel-polyfill'을 명시해야 한다. 이를 깜빡하면 구형 브라우저에서 에러가 발생한다. 또한 babel-polyfill을 dependencies에 포함시켜야 프로덕션에서도 정상 동작한다.

당분간은 preset-env를 표준으로 사용할 예정이다.