Question

我正在尝试优化页面www.gamestegy.com，例如，当我在PageSpeed Insights上对其进行检查时，例如在此链接https://www.gamestegy.com/read-post/233/alistair-the-juggernaut-build上，我得到以下消息：预加载关键请求。这将使我节省近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+ */
}

assets文件夹还包含正在导入font.css的woff2和woff文件

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

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

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

关于，罗卡斯

Answer 1

嘿，我遇到了同样的问题，当然这是 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>

希望这对我有帮助，并为我的英语不好而道歉

用Nuxt js预加载字体

1 个答案: