UnoCSS 在 Vue 和 SolidJS 项目中 HMR 问题的分析与解决方案

在 UnoCSS 0.58.3 版本中，开发者在使用 Vue 或 SolidJS 框架时，配合 keep-alive 组件和 transformerVariantGroup 转换器时，遇到了热模块替换(HMR)的异常行为问题。本文将深入分析这一问题的成因，并提供有效的解决方案。

问题现象

在 Vue 项目中，当使用 keep-alive 组件缓存页面时，如果页面处于非活动状态，代码的热更新会导致包含 transformerVariantGroup 转换器的组件异常重新加载。类似的问题也出现在 SolidJS 项目中，启用 transformerVariantGroup 后，首次运行会导致 HMR 行为异常，页面出现闪烁现象。

问题分析

经过开发者社区的深入探讨和测试，发现问题的根源在于 UnoCSS 的默认模式设置。UnoCSS 默认使用 "global" 模式，这种模式下：

1. 样式处理会影响整个应用的 HMR 行为
2. 在 keep-alive 场景下，会导致不相关的组件也被重新加载
3. 在 SolidJS 中，会改变 Solid 插件默认的 HMR 行为，导致依赖目标的所有组件都被重新加载

解决方案

针对这一问题，社区提供了两种解决方案：

1. 使用 per-module 模式

在 UnoCSS 配置中设置 mode: "per-module" 可以解决大部分问题：

// uno.config.ts
export default defineConfig({
  // ...其他配置
  mode: 'per-module'
})

这种模式下：

• 每个模块的样式处理是独立的
• HMR 只会影响当前修改的模块
• 避免了全局样式处理带来的副作用

2. 调整开发服务器配置

对于 SolidJS 项目，还可以通过调整开发服务器配置来优化 HMR 行为：

// vite.config.ts
export default defineConfig({
  server: {
    hmr: {
      overlay: false
    }
  }
})

注意事项

1. per-module 模式目前仍处于实验阶段，可能会产生大量 CSS 文件，影响浏览器性能
2. 在开发过程中，样式加载顺序可能与构建输出略有不同
3. 建议在开发和生产环境使用相同的模式配置，以避免行为不一致

总结

UnoCSS 的样式处理模式对框架的 HMR 行为有显著影响。在复杂的应用场景下，特别是使用组件缓存功能时，选择合适的处理模式至关重要。per-module 模式虽然仍处于实验阶段，但已经能够有效解决大部分 HMR 相关问题。开发者可以根据项目实际情况选择合适的解决方案。

随着 UnoCSS 的持续发展，相信这类问题会得到更完善的解决。开发者社区也在积极反馈和测试，共同推动 UnoCSS 生态的成熟与稳定。