Skip to content
← Back to rules

nextjs/google-font-preconnect 正确性

它的作用

当通过 <link> 标签使用 Google Fonts 时,强制要求添加 rel="preconnect"

为什么这是个问题?

使用 Google Fonts 时,建议包含一个 preconnect 资源提示,以便尽早建立到所需源的连接。 如果没有 preconnect,浏览器需要在下载字体文件之前执行 DNS 查询、TCP 握手和 TLS 协商, 这可能导致字体加载延迟并影响性能。

示例

此规则的 错误 代码示例:

javascript
<link href="https://fonts.gstatic.com" />
<link rel="preload" href="https://fonts.gstatic.com" />

此规则的 正确 代码示例:

javascript
<link rel="preconnect" href="https://fonts.gstatic.com" />

如何使用

要通过配置文件或命令行 启用 此规则,可以使用:

json
{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/google-font-preconnect": "error"
  }
}
bash
oxlint --deny nextjs/google-font-preconnect --nextjs-plugin

参考资料