polyfill 은 충전솜이라는 뜻을 가지고 있다.
바벨만 있으면 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 있을것 같지만 없는 부분도 있기 때문에 이 부족한 부분을 채우기 위해 polyfill을 사용한다.
📌 폴리필은 런터임에 기능이 존재하는지 검사해서 기능이 없는 경우에만 주입한다
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.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를 이용하자
참고: 실전 리액트 프로그래밍