브라우저 호환성

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

목적

웹 사이트는 이전 버전과 호환성과 배포 파일의 크기 사이에 균형이 필요합니다. 오래된 브라우저는 최신 API나 구문을 지원하지 않으며 같은 기능을 구현하기 위해 더 많은 코드가 필요합니다. 이로 인해 다른 사용자의 사이트 로딩 타임이 증가하는 문제가 발생합니다. 절충안으로 도큐사우루스는 브라우저 목록으로 설정한 브라우저 버전만 지원할 수 있습니다.

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

caution

오래된 브라우저에서 컴파일된 출력은 지원하지 않는(너무 최근이라) 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개월 내 공식적인 지원 또는 업데이트(서비스 "중단"도 아니고)가 있었으면서
• 오페라 미니는 제외하고

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

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

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

npx browserslist --env="production"

아래 내용은 제품 빌드에서 지원하는 모든 브라우저 목록입니다. 2021년 5월 기준으로 출력한 것입니다.

and_chr 89and_uc 12.12chrome 89chrome 88chrome 87edge 89edge 88firefox 86ie 11ios_saf 14.0-14.5ios_saf 13.4-13.7safari 14safari 13.1samsung 13.0

더 알아보기

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