使用ViteFonts引入字体后生产环境出现preload警告

问题原因 #

vite-fonts插件默认会自动为引入的字体资源添加<link rel="preload">标签，但生产环境下可能因以下情况触发浏览器警告：

• 配置的字体字重未被项目实际使用，导致预加载的资源在规定时间内未被调用
• 插件生成的preload标签缺少正确的as或type属性，浏览器无法识别资源类型，判定预加载未生效

解决方案 #

1. 移除未使用的字体字重 #

检查项目中实际用到的字重，只保留需要的配置项，避免预加载未使用的资源：

// vite.config.mts
plugins: [
    ViteFonts({
      google: {
        families: [{
          name: 'Roboto',
          styles: 'wght@400;700', // 仅保留项目实际使用的字重
        },{
          name:'Noto+Sans+SC',
          styles: 'wght@400;500;700'
        }],
      },
    }),
],

2. 禁用自动Preload功能 #

如果不需要字体预加载优化，直接关闭插件的preload特性，彻底消除警告：

// vite.config.mts
plugins: [
    ViteFonts({
      google: {
        families: [{
          name: 'Roboto',
          styles: 'wght@100;300;400;500;700;900',
        },{
          name:'Noto+Sans+SC',
          styles: 'wght@100;300;400;500;700;900'
        }],
      },
      preload: false, // 关闭自动预加载
    }),
],

3. 修正Preload属性配置 #

若需要保留预加载优化，通过preloadOptions为标签添加正确的属性，让浏览器正确识别资源：

// vite.config.mts
plugins: [
    ViteFonts({
      google: {
        families: [{
          name: 'Roboto',
          styles: 'wght@100;300;400;500;700;900',
        },{
          name:'Noto+Sans+SC',
          styles: 'wght@100;300;400;500;700;900'
        }],
      },
      preloadOptions: {
        as: 'font',
        type: 'font/woff2',
        crossorigin: 'anonymous' // 谷歌字体需跨域，必填
      }
    }),
],

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