Css 使用Nuxt js预加载字体

我正在尝试优化我的页面，例如，在这个链接上，当我在PageSpeed Insights上检查它时，我得到这样一条消息：预加载密钥请求。这样我就可以节省2秒钟

我当前的设置是，我在assets文件夹中有一个font.css文件，其中字体以以下方式导入：

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: local('IBM Plex Mono Medium'), local('IBMPlexMono-Medium'),
    url('../fonts/ibm-plex-mono-v5-latin-ext_latin-500.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url('../fonts/ibm-plex-mono-v5-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

“资产”文件夹还包含导入font.css的woff2和woff文件

现在这个设置没有任何预加载（据我所知）。因此，我尝试研究如何设置预加载，我发现其中一个选项是在nuxt.config.js中使用：

  render: {
    bundleRenderer: {
      shouldPreload: (file, type) => {
        return ['script', 'style', 'font'].includes(type);
      }
    }
  },

但是，这会导入页面可能不需要的所有字体文件（总共20多个导入）。如何正确导入字体预加载

问候,，

---

Rokas

嘿，我也遇到了同样的问题，当然这是gtmetrix警告之一，所以经过多次搜索，我发现我可以将代码放在layouts/default.vue中（在某些项目中，目录的名称可能不同，但这是一个文件，您可以像这样定义页眉和页脚组件：

<SiteHeader />

<nuxt /> ( your content )

<SiteFooter />

（你的内容）

在我提到的default.vue模板中，您可以像其他站点一样简单地添加代码：

<template>
<div>
<link rel="preload" as="style" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" crossorigin="anonymous" onload="this.rel='stylesheet'"/>
</dive>
<SiteHeader />

<nuxt /> ( your content )

<SiteFooter />
</template>

（你的内容）

---

希望这有帮助，并为我糟糕的英语道歉。嘿，我也有同样的问题，当然这是gtmetrix警告之一，所以在多次搜索后，我发现我可以将代码放在layouts/default.vue中（在某些项目中，目录的名称可能不同，但这是一个您可以定义页眉和页脚组件的文件，如下所示：

<SiteHeader />

<nuxt /> ( your content )

<SiteFooter />

（你的内容）

在我提到的default.vue模板中，您可以像其他站点一样简单地添加代码：

<template>
<div>
<link rel="preload" as="style" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" crossorigin="anonymous" onload="this.rel='stylesheet'"/>
</dive>
<SiteHeader />

<nuxt /> ( your content )

<SiteFooter />
</template>

（你的内容）

希望这是有帮助的，并为我糟糕的英语道歉