在angular 7中使用自定义字体文件时，如何减少初始加载时间？

Question

我已将本地字体文件保留在asset / fonts文件夹中。我一共使用了3种字体（lato，raleway，glyphicons-regular）。

在index.html中“ head”标签下，我的写法如下所示，

<link rel="preload" href="./assets/fonts/Lato/Lato-Semibold.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Lato/Lato-Black.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Lato/Lato-Bold.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Lato/Lato-Heavy.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Lato/Lato-Medium.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Lato/Lato-Regular.woff2" as="font" crossorigin>

    <link rel="preload" href="./assets/fonts/Raleway/Raleway-Black.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Raleway/Raleway-Bold.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Raleway/Raleway-ExtraBold.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Raleway/Raleway-Medium.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Raleway/Raleway-MediumItalic.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Raleway/Raleway-Regular.woff2" as="font" crossorigin>
    <link rel="preload" href="./assets/fonts/Raleway/Raleway-SemiBold.woff2" as="font" crossorigin>

    <link rel="preload" href="./assets/fonts/glyphicons-halflings-regular.ttf" as="font" crossorigin>

并创建了一个名为fonts.scss的文件，并导入所有如下所示的字体，

@font-face {
  font-family: "Lato-Medium";
  src: url("/assets/fonts/Lato/Lato-Medium.woff2") format('woff2');
}

@font-face {
  font-family: "Lato-Regular";
  src: url("/assets/fonts/Lato/Lato-Regular.woff2") format('woff2');
}

我正在使用gzip压缩并实现了PWA。 报告显示，执行“ ng build --prod”构建并部署应用程序并在“ chrome lighthouse”中检查性能后，预加载密钥请求将花费大量时间。如何减少这个时间？有什么解决办法吗？

Answer 1

因为您已经在这样的scss文件中包含了字体

src: url("/assets/fonts/Lato/Lato-Medium.woff2") format('woff2');

因此，您只需将所需的字体添加到scss文件中，然后将其从index.html中删除

还将字体添加到ngsw-config.json中以对其进行缓存

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/assets/favicon.ico",
          "/*.css",
          "/*.js",
        ],
        "urls": [
          "https://fonts.googleapis.com/css?family=Raleway" // add your font here
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/images/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}