메인 컨텐츠로 이동
Version: 2.0.0-beta.21 🚧

브라우저 호환성

도큐사우루스는 browserslist configuration을 통해 지원되는 브라우저 목록을 설정할 수 있습니다.

목적

웹 사이트는 이전 버전과 호환성과 배포 파일의 크기 사이에 균형이 필요합니다. As old browsers do not support modern APIs or syntax, more code is needed to implement the same functionality.

For example, you may use the optional chaining syntax:

const value = obj?.prop?.val;

...which unfortunately is only recognized by browser versions released after 2020. To be compatible with earlier browser versions, when building your site for production, our JS loader will transpile your code to a more verbose syntax:

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;

However, this penalizes all other users with increased site load time because the 29-character line now becomes 168 characters—a 6-fold increase! (In practice, it will be better because the names used will be shorter.) As a tradeoff, the JS loader only transpiles the syntax to the degree that's supported by all browser versions defined in the browser list.

브라우저 목록은 기본적으로 package.json 파일에 browserslist 필드 항목으로 설정됩니다.

caution

On old browsers, the compiled output will use unsupported (too recent) JS syntax, causing React to fail to initialize and end up with a static website with only HTML/CSS and no JS.

기본값

기본 클래식 템플릿으로 초기화된 웹 사이트는 다음과 같은 package.json 파일이 만들어집니다.

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"
]
}
// ...
}

제품 빌드 시 지원하는 브라우저에 대한 설정을 풀어보면 아래와 같은 내용입니다.

  • 마켓 점유율 0.5% 이상이면서
  • 최근 24개월 내 공식적인 지원 또는 업데이트(서비스 "중단"도 아니고)가 있었으면서
  • 오페라 미니는 제외하고

개발 시에는 아래와 같은 브라우저를 사용할 수 있습니다.

  • 크롬 또는 파이어폭스 또는 사파리 최신 버전

You can "evaluate" any config with the browserslist cli to obtain the actual list:

npx browserslist --env="production"

The output is all browsers supported in production. Below is the output in January 2022:

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

더 알아보기

자세한 내용은 browserslist 문서를 참고하세요. query 값에 대한 설명이나 적용 사례 등도 살펴볼 수 있습니다.