Skip to content
← Back to rules

nextjs/google-font-preconnect Correctness

它的作用

在通过 <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" />

如何使用

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/google-font-preconnect": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["nextjs"],
  rules: {
    "nextjs/google-font-preconnect": "error",
  },
});
bash
oxlint --deny nextjs/google-font-preconnect --nextjs-plugin

版本

此规则是在 v0.2.0 中添加的。

参考资料