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

Question

目前，一个移动性能工具报告我的网站得分非常低，因为一些字体文件在网站几乎完全初始化后才被加载。这个工具建议我使用`rel="preload"`链接来预加载那些字体文件。问题是，在生产环境中，Angular的文件名包含内容散列，所以`my-font.woff`变成了`my-font..woff`。

有没有办法绕过它并预加载`my-font..woff`，而不禁用文件散列，因为文件散列在检测陈旧缓存文件时提供了一些优势。

- Robin De Schepper

Answer 1

根据您的要求，您应该选择preload-webpack-plugin。请参阅文档以了解更多信息。在您的情况下，可以像这样使用 -

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

您需要将此插件和此代码添加到应用程序和 Webpack 配置中。希望这可以帮助您！

- Vinay sharma

---

有没有在不弹出webpack的情况下在Angular中实现这个的方法？ - Robin De Schepper

你可以将 rel="preload" 直接添加到字体标签中来静态处理，但这会导致需要删除哈希。动态地使用 webpack 是唯一的解决方案。 - Vinay sharma

好的，那么弹出webpack有什么显著的缺点吗？ - Robin De Schepper

没有什么不好的地方，只是需要额外进行一些步骤。 - Vinay sharma

这真的很有帮助，谢谢。我无法弄清楚如何让更受欢迎的插件“webpack-font-preload-plugin”处理哈希值。 - John Gorenfeld

这是截止日期内唯一的方法吗？ - Manos Kaparos