如何使用 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 配置中。希望这会有所帮助！