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

Question

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

有没有办法规避这一点并预加载my-font.<some-hash>.woff，而不禁用文件哈希，因为文件哈希在检测陈旧的缓存文件时提供了一些优势。

Answer 1

根据您的要求，您应该选择预加载-webpack-plugin。

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

在你的场景中，它可以像这样使用——

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

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