[wake up!] bundler, babel-polyfill

bundler

번들러 비교를 통한 빌드 최적화

• JS 빌드 과정
  1. 트랜스파일(Transpiling)
  2. 번들링(Bundling)
  3. 압축(Minifying)
• 번들러(bundler)
  • webpack
  • rollup
  • parcel
  • swc
  • esbuild
  • ....

초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC

• 바벨(Babel)로 ES6 최신 js 문법을 트렌스파일링 하고 코드 경량화를 위해 Terser같이 mangler로 단어를 축약하고, compressor로 js코드를 압축시킨다.
• 여기서 모든 과정들이 시간을 할당 받게된다. build 작업 시간을 줄이고 좋은 포퍼먼스를 찾는것이 중요한 과제가 된다. => 여기서는 요즘 핫한 SWC(Speedy Web Compiler)를 소개한다.

Babel로 polyfill 적용

You don't know polyfill

• @babel/polyfill(@deprecated)
  • polyfill 모듈인 core-js와 regenerator-runtime을 import하는 역할만 한다.
  • core-js는 전역에 polyfill을 추가하기 전에 해당 기능이 있는지를 체크하기 때문에 최신 브라우저에서는 polyfill 없이 동작
  • @babel/polyfill을 import 하는 순간, polyfill 대상 모듈 하위의 많은 모듈이 모두 번들에 포함
  • 두 개 이상의 @babel/polyfill이 import되면 오류가 발생
  • @7.4.0에서 deprecated -> @babel/preset-env로 통합하여 사용
• @babel/plugin-transform-runtime
  • transpile 과정에서 polyfill이 필요한 부분의 동작을 내부 helper 함수로 치환
  • @babel/polyfill과 달리 필요한 부분에만 polyfill을 적용하기 때문에 bundle size 측면에서 이점이 있으나, 많은 부분을 신경 써야 한다.
    • 예를 들어, axios를 디펜던시로 사용하는 프로젝트에서는 node_modules/axios까지 transpile 범위에 포함되도록 해야 한다. axios는 내부적으로 Promise를 사용하는 라이브러리인데, babel-plugin-transform-runtime은 Promise 전역 객체를 생성하지 않으므로 에러가 발생한다.
• @babel/preset-env
  • core-js-compat을 디펜던시로 가지고 있고, babelrc에 설정된 target 값을 보고 core-js-compat/data를 이용해 필요한 polyfill만 로드한다.
  • useBuiltIns
    • default: 기본값은 false이므로 이 값을 설정하지 않으면 polyfill이 추가되지 않는다.
    • entry: transpile 하는 시작점에 import된 core-js모듈과 regenerator-runtime모듈을 babelrc에서 지정한 target에 맞게 변경
    • usage: 실제 코드에서 사용하는 polyfill만 import
      • usage옵션은 사용하는 코드만 polyfill 대상으로 보기 때문에, 사용하는 node_modules의 dependency에서 polyfill이 적용되지 않은 코드가 있다면 에러가 발생할 수 있다.
• polyfill.io
  • polyfill.io service는 요청하는 브라우저의 User-Agent를 확인하여 필요한 polyfill만 추가할 수 있는 서비스
  • features
    • default: 내부에 정의된 aliases.json을 참고하여 필요한 polyfill 목록을 자동으로 추가
  • flags
    • always: User Agent 값과 관계없이 항상 load 하도록 설정
      • 사용하고자 하는 polyfill이 브라우저에 구현되어 있는지 확인하는 옵션은 flags=always, gated

라이브러리 제작시, 많은 사람들이 polyfill의 책임을 Application으로 이양하고 polyfill이 필요한 부분에 대해 힌트를 제공하는 방식 선호 한다.