如何使用 Vercel/Next.js 改进字体加载/缓存？

Question

我在网站上使用自定义字体。它有效，但看起来它们缓存的时间不够长，因为我经常得到 FOUT。有时一天多次，在生产中。我希望我可以将字体缓存更长的时间（或其他解决方案），以防止这种情况经常发生。

字体是这样预加载的_document.tsx：

<link
   rel='preload'
  as='font'
  href='/fonts/Calibre-Regular.woff2'
  type='font/woff2'
  crossOrigin='anonymous'
  />

然后_app.tsx像这样：

<script jsx>{`
 @font-face {
  font-family: 'Calibre';
  font-display: swap;
  src: url('/fonts/Calibre-Regular.woff2') format('woff2'),
    url('/fonts/Calibre-Regular.woff') format('woff');
}
`}</script>

我该如何改进？或者为字体设置更长的缓存时间？

Answer 1

在没有看到完整示例的情况下，我\xe2\x80\x99d：

\n

\n
• 首先确认您的 React 应用程序是服务器渲染的。对于 Next.js，我\xe2\x80\x99d 想象它是，但是标签link和script（应该是一个style标签？） 应该是初始 HTML 的一部分
\n
• 检查是否将内联 CSS 更改为<link />标签和单独的 CSS 样式，其中仅包含@font-face声明。是的，这会增加一个额外的 HTTP 请求，但 CSS 可能会遵循 Vercel\xe2\x80\x99s 静态缓存规则，并且 31 天内不会更改：https ://vercel.com/docs/edge-network/caching#static -files（尽管这里\xe2\x80\x99不清楚当您重新部署该文件或进行任何部署时缓存是否失效）
\n
• 决定使用自定义内容来覆盖 Vercel\xe2\x80\x99s 默认缓存设置，并在 vercel.json 文件中添加 Routes 属性。
\n

\n

例如，要将fonts/目录中的所有内容缓存一周（并假设新的外部 CSS 文件也在那里），配置将为：

\n

{\n  "routes": [\n    {\n      "src": "/fonts/(.*)",\n      "headers": { "cache-control": "s-maxage=604800" },\n      "dest": "/fonts/$1"\n    }\n  ]\n}\n

\n

这是基于文档中的配置示例：https ://vercel.com/docs/configuration#routes/headers

\n

希望其中的一个或多个能够对您有所帮助！

\n