Vite优化CSS热更新技巧分享

Vite 中 CSS 热更新（HMR）缓慢的真正瓶颈并非常被误解的 `cssCodeSplit`（它只影响生产构建），而是 `css.devSourcemap` 未启用、`css.transformer` 未升级至更高效的 `lightningcss`，以及 `server.watch.ignored` 配置不当导致监听抖动；此外，动态拼接 CSS、远程 `@import`、JS 内联注入等绕过模块系统的写法也会让 HMR 失效或严重降速——只需三步关键配置优化 + 规避非模块化写法，即可将 CSS 热更新延迟从 1–2 秒大幅压缩至毫秒级响应，大幅提升开发体验。

CSS 热更新慢，根本不是 cssCodeSplit 的问题——它只影响生产构建，对开发时 HMR 完全无作用。

为什么改了 CSS 文件，浏览器要等 1–2 秒才更新？

这是 Vite 开发服务器在处理 CSS 模块时的典型延迟，常见于以下场景：

• 项目启用了 PostCSS 插件（如 postcss-preset-env 或自定义 postcss.config.js），每次变更都触发完整重编译
• CSS 文件被多个组件 import，且未启用 css.devSourcemap，导致浏览器 DevTools 无法快速定位变更源，Vite 回退到保守更新策略
• 使用了 @import 嵌套或 url() 引用本地资源（如字体、SVG），Vite 需要重新解析整个依赖图
• 开启了 css.lightningcss 但未配置 css.lightningcss.cssModules，导致模块化 CSS 处理变慢

真正影响 CSS HMR 速度的关键配置项

Vite 的 CSS 热更新性能由以下三个配置直接控制，cssCodeSplit 不在其中：

• css.devSourcemap: true —— 必开。让 Vite 能精准识别哪个 CSS 规则被修改，避免整文件重载
• css.transformer: 'lightningcss' —— 在 v6.3.2+ 中推荐启用。比默认的 esbuild CSS 转换器快 40%+，尤其对大文件
• server.watch.ignored 排除 **/node_modules/** 和 **/dist/** —— 防止 CSS 变更触发无关文件监听抖动

示例配置：

export default defineConfig({
  css: {
    devSourcemap: true,
    transformer: 'lightningcss',
    lightningcss: {
      // 若使用 CSS Modules，务必开启此选项，否则 HMR 会降级
      cssModules: { auto: true }
    }
  },
  server: {
    watch: {
      ignored: ['**/node_modules/**', '**/dist/**']
    }
  }
})

哪些 CSS 写法会让 HMR 变慢甚至失效？

即使配置正确，以下写法仍会绕过 Vite 的高效 CSS HMR 流程：

• 在 JS 中动态拼接 CSS 字符串并注入