Unocss/Nuxt 项目中自定义字体重复加载问题分析

问题现象

在Unocss/Nuxt项目中，当使用presetWebFonts预设并导入自定义字体样式时，发现一个特殊现象：在调整浏览器窗口大小时，字体文件会被反复重新加载。这个问题在本地开发环境中可以稳定复现，但在StackBlitz在线环境中却无法重现。

问题复现条件

经过多位开发者的测试验证，该问题具有以下特征：

1. 仅在本地开发环境中出现
2. 需要同时满足以下技术栈组合：
   • 使用@unocss/nuxt模块
   • 配置了presetWebFonts预设
   • 导入了自定义字体样式
3. 窗口大小调整时触发，且只在特定尺寸范围内出现

问题根源分析

深入调查后发现，这个问题实际上与Nuxt DevTools的开发工具有关。当禁用DevTools后，字体重复加载的问题随即消失。这表明：

1. 问题并非直接由Unocss引起
2. DevTools在监测样式变化时可能触发了字体资源的重新加载
3. 响应式断点变化可能是触发条件之一

解决方案

针对此问题，目前有两种可行的解决方案：

1. 禁用Nuxt DevTools
   在nuxt.config.js配置文件中添加以下设置：

   export default defineNuxtConfig({
     devtools: {
       enabled: false
     }
   })
   

2. 生产环境构建
   由于该问题仅出现在开发环境，构建生产版本后问题自然消失。

技术启示

这个案例给我们带来几点重要的技术启示：

1. 开发工具可能会引入意料之外的副作用
2. 资源加载问题需要综合考虑整个技术栈的交互
3. 开发环境与生产环境的行为差异需要特别关注
4. 响应式设计可能影响资源的加载行为

对于Unocss/Nuxt项目的开发者来说，当遇到类似资源重复加载的问题时，可以考虑临时禁用相关开发工具来排查问题。