nuxt.js

Question

试图提高我的 google 分数，而 google 告诉我对我使用的两种自定义字体使用预加载以节省高达 4.5 秒的时间？当前字体存储在 assets/fonts 中，然后在 typography.scss 文件中作为 @font-face 加载，然后加载到 css 内的 nuxt.config.js 文件中： [ '@/assets/scss/typography.scss', ]

Answer 1

所以我猜你是在问如何预加载字体？有一种方法可以调用 nuxt.config.js 中的渲染函数，它会预加载字体、脚本和样式，然后让它们在客户端可用，这样你就不必在 scss 文件中加载字体，只需设置它.试试这个：

//nuxt.config.js

module.exports = {
  mode: ' your mode ',

  ...

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

  },
  ...

}

您可能还应该将字体存储在静态文件夹中。 /static/fonts/yourfonts.woff2

nuxt.js - 预加载 .woff 字体加载为 @font-face

nuxt.js - preload .woff fonts loaded as @font-face

javascript

fonts

webpack

vue.js