바벨 (3) (Polyfill)

jaehan·2023년 2월 12일
0

babel

목록 보기
3/4
post-thumbnail

폴리필 (Polyfill)

polyfill 은 충전솜이라는 뜻을 가지고 있다.
바벨만 있으면 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 있을것 같지만 없는 부분도 있기 때문에 이 부족한 부분을 채우기 위해 polyfill을 사용한다.
📌 폴리필은 런터임에 기능이 존재하는지 검사해서 기능이 없는 경우에만 주입한다

core-js 사용

core-js는 바벨에서 폴리필을 위해 공식적으로 지원하는 패키지이다.

import 'core-js';
...


module.exports = {
  entry: ['core-js', './src/index.js'],
  // ...
};


import 'core-js/features/promise';
import 'core-js/features/object/values';
import 'core-js/features/array/includes';

위 처럼 core-js를 사용할 수 있는데 첫번째나 두번째 코드처럼 하면 core-js모듈의 모든 폴리필이 포함되기 때문에 번들 파일의 크기가 커진다.

따라서 세번째 처럼 필요한 것만 가져오면 번들의 크기를 최소화 할 수 있다.

@babel/preset-env 사용

@babel/preset-env 프리셋은 실행 환경에 대한 정보를 설정해 주면 자동으로 필요한 기능을 주입해 준다.

babel.config.js

const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        chrome: "40",
      },
      useBuiltIns: "true",
      corejs: { version: 3, proposals: true },
    },
  ],
];

module.exports = { presets };

위처럼 프리셋으로 preset-env를 설정해주고
옵션으로 크롬 버전을 최소 40으로 설정,
useBuiltIns 속성을 true로 설정
📌 true로 설정하면 지원하는 브라우저에 필요한 폴리필만 포함시키고, usage로 설정하면 코드애서 사용된 기능의 폴리필만 추가한다
바벨에게 core-js 버전을 알려준다.

src/code.js

import "core-js";

const p = Promise.resolve(10);
const obj = {
  a: 10,
  b: 20,
  c: 30,
};
const arr = Object.values(obj);
const exist = arr.includes(20);

위 코드를 변환시키면 아래처럼 크롬 버전 40에 없는 기능을 위한 모든 폴리필이 출력된다.

use strict";

require("core-js/modules/es.symbol");
require("core-js/modules/es.symbol.description");
// ...
require("core-js/modules/web.url-search-params");
...

위와 같은 상황에는 useBuiltIns 속성을 usage로 설정해야 필요한 폴리필만 추가된다.

📌 번들 파일의 크기를 최적화할 목적이라면 core-js로 필요한 폴리필을 직접 추가하는 방식을 이용하고
적당한 번들 파일 크기를 유지하면서 폴리필 추가를 까먹을 것 같으면 @babel/preset-env를 이용하자

참고: 실전 리액트 프로그래밍

0개의 댓글