バージョン: 3.5.2

ブラウザサポート

Docusaurus では、browserslist 設定を通じて、サポートするブラウザのリストをサイトで定義できます。

目的

ウェブサイトでは、後方互換性とバンドルサイズとのバランスを取る必要があります。古いブラウザは最新の 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ローダーは、ブラウザリストに定義されているすべてのブラウザバージョンでサポートされている程度にのみ構文をトランスパイルします。

ブラウザリストは、デフォルトでルートbrowserslistフィールドとしてpackage.jsonファイルを通じて提供されます。

警告

古いブラウザでは、コンパイルされた出力ではサポートされていない（あまりにも新しい）JS構文が使用されるため、Reactの初期化に失敗し、HTML/CSSのみで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ヶ月間に公式サポートまたはアップデートが行われているもの（「廃止」とは反対）。そして
Opera Miniではないもの。

開発で使用されるブラウザは、

Chrome、Firefox、Safariの最新バージョン。

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 のドキュメントを参照して、特に受け入れられるクエリ値とベストプラクティスについて詳細を確認することをお勧めします。

目的​

デフォルト値​

詳細​

目的

デフォルト値

詳細