跳到主要内容

支持的浏览器

Docusaurus 允许网站通过 browserslist 配置 来定义其要支持的所有浏览器。

目的

Websites need to balance between backward compatibility and bundle size. As old browsers do not support modern APIs or syntax, more code is needed to implement the same functionality.

For example, you may use the optional chaining syntax:

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.

默认情况下,浏览器列表是通过 package.json 文件中的 browserslist 字段来设置的。

警告

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.

默认值

使用默认的 classic 主题所初始化的网站的 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。

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

了解更多

你可能希望访问 browserslist 文档 以了解更多规范,尤其是该工具所能接受的 查询值最佳用法