浏览器支持

Docusaurus allows sites to define the list of supported browsers through a browserslist configuration.

目的

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

For example, you may use the optional chaining syntax:

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 倍！ （实际的效果会比这个好一点，因为生成的名字会变短。） 作为折中，加载器只会把语法转译到浏览器列表中的所有版本都支持的范围内。

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

警告

在较旧版本的浏览器中，编译后的输出将使用未支持的新 JS 语法，从而导致 React 无法初始化，并最终使得你的网站变成一个仅有 HTML/CSS，没有 JS 的静态网站。

默认值

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

用人话来说，生产环境中所支持的浏览器为：

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

而在开发环境中支持的浏览器为：

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

这个命令的输出是所有生产构建所支持的浏览器。 下面是在 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

了解更多

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