如何使用rel =“ preload”和Angular的哈希文件名预加载内容？

Question

当前，一个移动性能工具报告我的网站得分很差，因为一​​些字体文件是在网站几乎完全初始化之后才加载的。该工具建议我使用rel="preload"链接来预加载这些字体文件。问题在于，在生产环境中，Angular的文件名包含内容哈希，因此my-font.woff变为my-font.<some-hash>.woff。

有一种方法可以绕过此问题并预加载my-font.<some-hash>.woff，而无需禁用文件哈希，因为文件哈希在检测过期缓存文件时提供了一些优势。

Answer 1

根据您的要求，您应该参加preload-webpack-plugin。

请按照文档了解更多有关其工作的信息。

在您的情况下，可以这样使用-

plugins: [
  new HtmlWebpackPlugin(),
  new PreloadWebpackPlugin({
    rel: 'preload',
    as(entry) {         
      if (/\.woff$/.test(entry)) return 'font';         
    }
  })
]

您将不得不将此插件和此代码分别添加到应用程序和Webpack配置中。希望这会有所帮助！