Webpack5下使用字体预加载时如何避免字体文件重复下载？

独立的fonts.css只要配置内容哈希实现长期缓存，本身加载开销极低，内联反而会增大首屏HTML体积、破坏css的长期缓存能力，完全没有内联的必要。当前预加载失效的核心原因是HTML中硬编码的预加载路径和Webpack打包后的带哈希字体路径完全不匹配，不需要改动css的处理链路，按以下步骤调整即可：

步骤1：拆分Webpack资源处理规则，固定字体输出路径 #

把和图片混在一起的字体规则单独拆出，明确字体的输出路径和命名规则，避免资源混乱：

// 替换原有混合了图片、字体的asset配置
{
  // 单独处理woff2字体，不和图片规则混杂
  test: /\.woff2$/,
  type: 'asset/resource',
  generator: {
    // 固定输出到fonts目录，文件名保留原名称+8位内容哈希，方便溯源和缓存
    filename: 'static/fonts/[name].[contenthash:8][ext]'
  }
},
{
  // 图片规则单独保留
  test: /\.(png|jpg|gif)$/,
  type: 'asset/resource',
  generator: {
    filename: 'static/images/[name].[contenthash:8][ext]'
  }
}

原有的fonts.css和对应的mini-css-extract-plugin、css-loader、postcss-loader配置不需要做任何改动，css-loader本来就会正确解析@font-face里的url路径，自动映射为打包后的资源地址。

步骤2：移除HTML中硬编码的错误预加载代码 #

直接删掉模板里手写的这段预加载配置，因为硬编码的路径没有任何Webpack动态解析能力，永远不可能匹配到打包后带哈希的字体文件，这是预加载失效的核心根源：

<!-- 直接删掉这段，不要硬写 -->
<link
  rel="preload"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
  href="static/fonts/MyFont.woff2"
>

步骤3：用Webpack预加载能力自动注入正确的字体预加载标签 #

引入专门处理Webpack资源预加载的插件，插件会自动追踪Webpack资源图谱中所有woff2字体的真实打包路径，自动向HTML中插入路径正确、属性完整的预加载标签，不需要手写维护：

// 插件配置示例
new PreloadWebpackPlugin({
  rel: 'preload',
  as: 'font',
  include: 'allAssets',
  // 只匹配woff2格式的字体文件
  fileWhitelist: [/\.woff2$/],
  // 自动补充字体加载必需的crossorigin属性，避免预加载资源无法被@font-face复用的问题
  crossorigin: 'anonymous'
})

方案优势 #

• 完全保留独立的fonts.css文件，配合mini-css-extract-plugin给css配置内容哈希命名规则，可实现样式资源的长期缓存，后续只要字体文件没修改，用户就不需要重复下载css和字体
• 自动生成的预加载标签路径和Webpack实际输出的字体路径完全一致，预加载的字体会在fonts.css请求完成前就提前下载，且因为自动带了crossorigin属性，下载的资源可以直接被@font-face规则复用，不会出现重复下载、预加载失效的问题
• 资源规则拆分后，字体、图片的输出路径清晰隔离，避免默认输出规则下的文件名混乱问题

内容的提问来源于stack exchange，提问作者user3056783