nuxt.js - предварительно загружать .woff шрифты, загруженные как @ font-face

Question

Пытаясь улучшить мой показатель Google, Google указывает мне использовать предварительную загрузку двух пользовательских шрифтов, которые я использую, чтобы сэкономить колоссальные 4,5 секунды? в настоящее время шрифты хранятся в assets / fonts и затем загружаются как @ font-face в файл typography.scss, когда затем загружаются в файл nuxt.config.js внутри css: ['@ / assets / scss / typography.scss' ,]

изображение аудита Google - https://imgur.com/a/LaMLnJ1

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