브라우저 호환성
Docusaurus allows sites to define the list of supported browsers through a browserslist configuration.
Purpose
웹 사이트는 이전 버전과 호환성과 배포 파일의 크기 사이에 균형이 필요합니다. 구형 브라우저는 최신 API 또는 구문을 지원하지 않아 같은 기능을 구현하려면 더 많은 코드가 필요합니다.
For example, you may use the optional chaining syntax:
const value = obj?.prop?.val;
...아쉽게도 이 구문은 2020년 이후 출시된 브라우저 버전에서만 인식됩니다. 이전 브라우저 버전과 호환되도록 사이트를 구축한다면 JS 로더는 코드를 좀 더 자세한 구문으로 변환합니다.
var _obj, _obj$prop;
const value =
(_obj = obj) === null || _obj === void 0
? void 0
: (_obj$prop = _obj.prop) === null || _obj$prop === void 0
? void 0
: _obj$prop.val;
하지만 이렇게 하면 29자로 작성한 코드가 168자(6배 늘어난!)가 되기 때문에 사이트 로드 시간이 늘어나 다른 모든 사용자에게 불이익을 줍니다. (실제 동작 시에는 변수명을 줄여주기 때문에 좀 더 줄어들긴 합니다). 절충안으로 JS 로더는 브라우저 목록에 정의된 브라우저 버전을 지원하는 정도로 구문을 변환합니다.
The browser list by default is provided through the package.json
file as a root browserslist
field.
오래된 브라우저에서 컴파일된 출력은 지원하지 않는(너무 최근이라) JS 구문으로 인식될 겁니다. 때문에 리액트 초기화는 실패하게 되고 자바스크립트 코드 없이 HTML/CSS만 가진 정적 웹 사이트로 만들어집니다.
Default values
Websites initialized with the default classic template has the following in package.json
:
{
"name": "docusaurus",
// ...
"browserslist": {
"production": [">0.5%", "not dead", "not op_mini all"],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
// ...
}
제품 빌드 시 지원하는 브라우저에 대한 설정을 풀어보면 아래와 같은 내용입니다.
- With more than 0.5% of market share; and
- Has official support or updates in the past 24 months (the opposite of "dead"); and
- 오페라 미니는 제외하고
개발 시에는 아래와 같은 브라우저를 사용할 수 있습니다.
- The latest version of Chrome or Firefox or Safari.
You can "evaluate" any config with the browserslist
CLI to obtain the actual list:
npx browserslist --env="production"
아래 내용은 제품 빌드에서 지원하는 모든 브라우저 목록입니다. 2022년 1월 기준으로 출력한 것입니다.
and_chr 96
and_uc 12.12
chrome 96
chrome 95
chrome 94
edge 96
firefox 95
firefox 94
ie 11
ios_saf 15.2
ios_saf 15.0-15.1
ios_saf 14.5-14.8
ios_saf 14.0-14.4
ios_saf 12.2-12.5
opera 82
opera 81
safari 15.1
safari 14.1
safari 13.1