Webpack에서 babel-preset-env로 전환하며 번들 사이즈 줄이기

문제 상황

기존 프로젝트에서 babel-preset-es2015를 사용하고 있었는데, 모든 ES6 기능을 ES5로 변환하다 보니 번들 사이즈가 불필요하게 컸다. Chrome 최신 버전은 대부분의 ES6 기능을 지원하는데, 이를 다시 ES5로 변환하는 건 낭비였다.

babel-preset-env 도입

최근 출시된 babel-preset-env는 타겟 브라우저 환경에 따라 필요한 변환만 수행한다.

// .babelrc
{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      },
      "modules": false,
      "useBuiltIns": true
    }]
  ]
}

modules: false 옵션은 Webpack의 tree shaking을 위해 ES6 모듈 구문을 유지한다. useBuiltIns는 필요한 polyfill만 포함시킨다.

결과

• 번들 사이즈: 324KB → 276KB (약 15% 감소)
• 빌드 시간: 큰 차이 없음
• IE11 포함 주요 브라우저에서 정상 동작 확인

추가 작업

babel-polyfill을 전역으로 import하던 방식에서, 필요한 polyfill만 자동으로 포함되도록 변경했다. Array.prototype.includes 같은 메서드는 타겟 브라우저에 따라 선택적으로 polyfill이 추가된다.

브라우저 지원 범위를 명시적으로 관리할 수 있게 되어 향후 레거시 브라우저 지원 중단 시에도 설정 변경만으로 대응 가능해졌다.