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 中添加的。
