Question

我创建并部署了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

有人知道我该如何解决吗？非常感谢！

Answer 1

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

我编写了一个节点脚本（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', () => {})

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

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

Answer 2

如果有人遇到相同的问题：字体预加载仅在通用模式下有效，而在开发模式下不激活。

切换到通用模式并运行npm run generate会在dist/中创建带有预加载字体的页面。

Nuxt-尽管在nuxt.config.js

2 个答案: