브라우저 호환성

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

목적

웹 사이트는 이전 버전과 호환성과 배포 파일의 크기 사이에 균형이 필요합니다. 구형 브라우저는 최신 API 또는 구문을 지원하지 않아 같은 기능을 구현하려면 더 많은 코드가 필요합니다.

예를 들어 옵셔널 체이닝 구문을 사용할 수 있습니다.

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 로더는 브라우저 목록에 정의된 브라우저 버전을 지원하는 정도로 구문을 변환합니다.

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

warning

오래된 브라우저에서 컴파일된 출력은 지원하지 않는(너무 최근이라) JS 구문으로 인식될 겁니다. 때문에 리액트 초기화는 실패하게 되고 자바스크립트 코드 없이 HTML/CSS만 가진 정적 웹 사이트로 만들어집니다.

기본값

기본 클래식 템플릿으로 초기화된 웹 사이트는 다음과 같은 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개월 내 공식적인 지원 또는 업데이트(서비스 "중단"도 아니고)가 있었으면서
• 오페라 미니는 제외하고

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

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

browserslist CLI에서 설정을 "평가"해서 실제 사용할 수 있는 목록을 얻을 수 있습니다.

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

더 알아보기

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