时间戳

首页 > 解决方案 > Nuxt - 尽管在 nuxt.config.js 中进行了配置，但没有预加载字体

nuxt.js - Nuxt - 尽管在 nuxt.config.js 中进行了配置，但没有预加载字体

问题描述

我创建并部署了一个 Nuxt 项目，Google Pagespeed 指出（正确地）我的字体在显示页面时没有预加载，这严重损害了我的 PageSpeed 分数。

我已经检查了这个问题：nuxt.js - preload .woff fonts loaded as @font-face还有这个问题：https://github.com/nuxt/nuxt.js/issues/1508，但我无法解决这个问题. 这是我尝试过的...

目前我的字体加载在assets/scss/_text.scss：

@font-face {
  font-family: Raleway-Medium;
  src: url("~assets/fonts/Raleway/Raleway-Medium.woff2");
}
// ...

然后在assets/scss/main.scss：

@import '~assets/scss/_text.scss';
// ...

最后在nuxt.config.js：

export default {
  // ...
  css: ['@/assets/scss/main.scss'],
  // ...
  render: {
    bundleRenderer: {
      shouldPreload: (_file, type) => {
        console.log(_file, type)
        return ['script', 'style', 'font'].includes(type)
      }
    }
  },
}

不幸的是，我的字体根本没有预装。实际上，console.log我在bundleRenderer函数中添加的甚至没有找到任何字体或样式文件，这是记录的内容：

runtime.js script                                                                 
commons.app.js script                                                             
vendors.app.js script                                                             
app.js script

有谁知道我该如何解决这个问题？非常感谢！

标签： nuxt.js

解决方案

实际上，我正在使用一种解决方法，但我很确定这不是一个完美的解决方案。

我编写了一个节点脚本（post-build.js），在“生成”命令之后运行。

我使用cheerio修改html文件内容

const fs = require('fs')
const cheerio = require('cheerio')
const links = []

fs.readdirSync('./dist/_nuxt/fonts/').forEach((file) => {
  const fileExtension = file.split('.')[1]
  if (fileExtension === 'woff2') {
    links.push(
      `<link rel="preload" href="/_nuxt/fonts/${file}" as="font" type="font/woff2" crossorigin>`
    )
  }
})

const html = fs.readFileSync('./dist/index.html', 'utf8')
const $ = cheerio.load(html)
$('head').append(links.join(' '))

fs.writeFileSync(`./dist/index.html`, $.html(), 'utf8', () => {})

然后我在我的 package.json 文件的脚本中添加以下 lin

"scripts:{
   "generate": "nuxt generate && node ./npm-scripts/post-build.js"
}

推荐阅读