浏览器支持

Docusaurus 允许站点通过browserslist 配置定义支持的浏览器列表。

Purpose

网站需要在向后兼容性和包大小之间取得平衡。由于旧浏览器不支持现代 api 或语法，因此需要更多代码来实现相同的功能。

例如，您可以使用可选链接语法:)

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.

The browser list by default is provided through the package.json file as a root browserslist field.

警告

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.

Default values

Websites initialized with the default classic template has the following in 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"]
  }
  // ...
}

Explained in natural language, the browsers supported in production are those:

• With more than 0.5% of market share; and
• Has official support or updates in the past 24 months (the opposite of "dead"); and
• Is not Opera Mini.

And browsers used in development are:

• 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"

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

Read more

You may wish to visit the browserslist documentation for more specifications, especially the accepted query values and best practices.