如何在带有 nuxt 的 vuetify 插件中使用 roboto 字体提高页面速度

Question

当我做灯塔报告时，这个性能问题出现在 Eliminate render-blocking resources 来自 url /css?family=Roboto:100,300,400,500,700,900&display=swap 它是由 vuetify 框架和 nuxt 生成的，我怎么能不阻止这个渲染？

Answer 1

默认情况下，vuetify 将 Roboto 字体和 MDI 图标添加到您的项目，从同步脚本外部加载它在头部。它会导致您的项目在其他所有内容之前加载它们，从而使您的页面加载大约延迟 1 秒。

您可以通过将以下内容添加到您的 nuxt.config.js 文件来关闭它：

vuetify: {
    defaultAssets: false
}

来源： 在 Whosebug 上。