vite 的 hmr 可实现秒级局部更新且保持状态，需确保入口接入 hmr 回调、正确 import 模块、启用 css.devsourcemap 和 tailwind jit，并排查路径别名、非法导出及第三方脚本干扰。

直接利用 Vite 的热更新（HMR）机制，能让你改一行 class 或一段逻辑，浏览器里几乎立刻看到效果，状态也不丢——关键不是“等它生效”，而是“让它稳稳生效”。

确保 HMR 基础能力正常启用

Vite 默认开启 HMR，但依赖几个隐性条件：

• 项目入口文件（如 main.js）需显式接入 HMR 生命周期，尤其在纯 JavaScript 项目中（无框架封装时）
• vite.config.js 中的 server.hmr 应保持为 true（默认即如此，但自定义配置后可能被覆盖）
• 修改的文件必须被当前模块正确 import，避免使用动态字符串路径（如 import(`./pages/${page}.js`) 会中断 HMR 追踪）

针对纯 JS 项目手动接入 HMR 回调

没有 Vue 或 React 的封装层时，Vite 不会自动重载整个页面。你需要自己写一小段逻辑来响应变更：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

• 在主入口文件末尾添加：
  

  if (import.meta.hot) {<br>
    import.meta.hot.accept(() => {<br>
      console.log('JS 模块已更新，可在此处触发局部刷新');<br>
    });<br>
  }

• 若页面逻辑依赖全局初始化（比如挂载 DOM、绑定事件），可在 accept 回调中执行清理 + 重建操作，避免内存泄漏或重复绑定
• 对工具函数或配置模块，通常只需接受更新即可，无需重执行；对 UI 相关模块，则建议结合 DOM 替换或状态重置

优化 CSS 和 HTML 相关热更新体验

Tailwind 或原生 CSS 修改延迟，往往不是 HMR 失效，而是链路未打通：

• 在 vite.config.js 中启用 CSS 源映射：css: { devSourcemap: true }，方便调试样式来源
• 确保 Tailwind 使用 JIT 模式（v3+ 默认开启），它会监听 HTML 文件中的 class 变更并即时生成对应 CSS
• HTML 文件本身不支持 HMR，但 Vite 会监听 index.html 变更并触发热刷新（非全页 reload）；如需更细粒度控制，可配合插件如 vite-plugin-html

排查常见 HMR 中断点

当修改代码后没反应，优先检查这几处：

• 浏览器控制台是否有 HMR error 或 Failed to fetch 报错（常因路径别名未正确解析）
• 是否在模块顶层写了 export default 以外的非法导出（如多个 default、或 export 后紧跟语句）
• 第三方脚本（如分析 SDK、埋点代码）是否在全局作用域执行副作用，干扰了 HMR 的模块卸载流程
• VS Code 或系统文件监视器是否因权限/路径深度限制导致变更未被监听（可尝试开启 server.watch.usePolling: true）

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南