预加载由Angular CLI插入的动态生成的字体文件

Question

我开始对我的一些字体采用<link rel="preload">策略，并且通过使用Lighthouse审计工具，我能够找到一些好的候选人。

灯塔推荐我5个，其中3个是静态的，所以很容易预加载。它们采取以下形式：

<link rel="preload" href="/fonts/my-font.woff" as="font" type="font/woff">

另外两个是由Angular动态生成的，并在运行时插入到我的HTML中。这些字体的问题是它们采用my-font.sr7er987f.woff的名称，我怀疑每次构建和部署应用程序时这个值都会有所不同。

我很好奇是否有办法在我的href上设置一个可以抓取这些字体的动态<link>属性？像<link rel="preload" href="fonts/my-font.*.woff"之类的东西。

谢谢

Answer 1

我遇到了同样的困境，想出了一个简单的bash脚本，可以在部署之前使用。

#!/bin/bash
for filename in ./path/*.ttf; do
  [ -e "$filename" ] || continue
  one=${filename#*./path/}
  two=${one%.*.ttf}
  three=${two%-*}
  salt=${one#*.}
  salt=${salt%.*}

  printf "Font:\n"
  printf 'assets/fonts/'"$three"'/'"$two"'.ttf\n'
  printf "was replaced with:\n"
  printf "$three"'.'"$salt"'.ttf\n'

  sed -i -e 's/assets\/fonts\/'"$three"'\/'"$two"'.ttf/'"$two"'.'"$salt"'.ttf/g' ./path/index.html
  printf "===SUCCESS===\n"

done

不是一个优雅的解决方案，但它完成了工作，取代：

<link rel="preload" href="assets/fonts/Raleway/Raleway-Regular.ttf" as="font" crossorigin="anonymous">

同

<link rel="preload" href="Raleway-Regular.580d0778ad254335be45.ttf" as="font" crossorigin="anonymous">

所以你需要做的就是配置路径并在index.html中声明字体。说完了，我注意到现在这些字体以某种方式下载两次，一次作为预加载，并在样式表（？）请求时再次下载。不过，这可能只是一个缓存问题。