【问题标题】:How do I preload web fonts when using vuejs and veutifyjs with vue-cli?将 vuejs 和 veutifyjs 与 vue-cli 一起使用时,如何预加载 Web 字体?
【发布时间】:2020-09-30 16:17:13
【问题描述】:

我有一个使用 vuejs 和 veutifyjs 创建的网络应用程序。 当进行 pagespeed 洞察时,我的性能非常低,建议我应该预加载一些 CSS 文件和 Web 字体。我可以更改 css 文件的 rel,但我不知道如何更改网络字体的 rel。 这是建议的图片。

【问题讨论】:

  • 如果您从 Google 加载 Roboto,那么您应该在 public/index.html 中使用 <link> - 因此添加 preload 属性很容易。

标签: vue.js vuetify.js preload vue-cli-3


【解决方案1】:

你可以通过两种方式来做:

  1. 在里面添加你的字体的<link>以及preload属性。
  2. service-worker 处理缓存机制,这将包括.woff 字体类型。

【讨论】:

  • 我正在使用服务人员来加载字体和 css。一切都很好。只是pagespeed的结果非常低。 11%
  • Pagespeed 和 web.dev 总体上有点严格。但我只关注我在 Lighthouse 内置 Chrome/Edge 上的指标。我会说这个网站至少和我客户的反馈一样可靠。
猜你喜欢
  • 2019-07-23
  • 2018-01-27
  • 1970-01-01
  • 2021-05-05
  • 2013-07-15
  • 2019-08-20
  • 1970-01-01
  • 2020-10-23
  • 1970-01-01
相关资源
最近更新 更多