为了提高我的谷歌分数,谷歌告诉我在我使用的两种自定义字体上使用预加载,以节省惊人的4.5秒?目前,字体存储在assets资源 /字体中,然后在排版中作为@font face加载.然后将scss文件加载到nuxt中.配置.css内的js文件:['@/assets/scss/typography.scss',]

图像预览

推荐答案

所以我猜你是在问如何预加载字体?有一种方法可以在nuxt中调用渲染函数.配置.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

Vue.js相关问答推荐

Vuetify从同一方向旋转传送带下一个项目和上一个项目

Vue3:如何在功能组件中重用插槽vnode

使用nuxt I18N验证规则消息翻译

为什么我的数组在 onBeforeMount 函数中不为空,但在 onMounted 函数中为空

有没有办法将react 键作为值传递给由 v-for 创建的 v-model

vuetify/mdi 不显示图标

使用 cypress 进行 e2e 测试的 vuejs 期间出现 Webpack 错误

TailwindCSS 为什么前者比后者重要?

vue.js 在 App.vue 中获取路由名称

正确实现 Vue.js + DataTables

Nuxt & Vuetify:如何控制 CSS 文件的加载顺序?

Transition-group children must be keyed...but they are keyed

如何在 Vue.js 中传递 $router.push 中的数据?

如何使用 laravel-mix 将 bootstrap-vue 加载到 Laravel 5 中?

在 vue/vuex(/flux?) 中使用 ES6 类是一种反模式吗?

如何禁用 nuxt 默认错误重定向

基本 vue.js 2 和 vue-resource http 获取变量赋值

异步方法不等待函数

如何将事件绑定到 Vuetify 中的树视图 node ?

VueJS 复选框更新