时间戳

首页 > 解决方案 > 如何使用 rel="preload" 和 Angular 的散列文件名预加载内容？

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

问题描述

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

有没有办法绕过这个和 preload my-font.<some-hash>.woff，而不禁用文件散列，因为文件散列在检测过时的缓存文件时提供了一些优势。

标签： htmlangularpreload

解决方案

根据您的要求，您应该选择preload-webpack-plugin。

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

在您的场景中，它可以像这样使用 -

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

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

推荐阅读