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

Question

目前，一个移动性能工具报告我的网站得分非常低，因为一些字体文件在网站几乎完全初始化后加载得非常晚。这个工具建议我使用 rel="preload" link 来预加载那些字体文件。问题是在生产环境中 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 配置中。希望这对您有所帮助！！

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

How to preload content with rel="preload" and Angular's hashed filenames?

html

preload

angular