Vite 的 HMR 到底是怎么知道我改了哪个模块的？
我在用 Vite 开发 React 项目时，发现只要改了某个组件，浏览器就只更新那个组件，不会整个页面刷新。但我不太明白它是怎么精准定位到具体模块的？
我试过在控制台看网络请求，发现会收到类似 {"type":"update","updates":[{"type":"js-update","path":"/src/components/Counter.jsx"}]} 的消息，但没搞懂 Vite 是怎么在文件改动后生成这个路径并通知客户端的？
是不是跟 import 的依赖图有关？有没有相关的源码逻辑可以参考？
- 1
回答
69浏览
Vue项目HMR更新后样式没变化是怎么回事？
在用Vue3+Vite开发时，修改组件样式后HMR虽然触发了更新，但页面样式就是不生效，得手动刷新才看得见变化，这正常吗？ 比如这个组件： <template> <div class...
- 1
回答
3浏览
Vite插件中transform钩子不生效是怎么回事？
我在写一个Vite插件，想用transform钩子处理.vue文件里的内容，但发现根本没进这个函数。配置也加了，路径也对，就是不触发，到底哪里出问题了？ 这是我的插件代码： export defaul...
- 1
回答
6浏览
Vite 创建的 React 项目里怎么用 Vue 组件？
我用 Vite 初始化了一个 React 项目，但因为历史原因需要临时引入一个 Vue 单文件组件。试了直接 import 报错说不支持 .vue 文件，是不是得额外装插件？ 我看到有些方案说要用 @...
- 2
回答
5浏览
Vite插件里怎么拦截并修改HTML内容？
我正在写一个Vite插件，想在开发服务器启动时动态修改index.html里的某个meta标签，但试了transformIndexHtml钩子好像没生效，控制台也不报错。 我查了文档说要用transf...
- 1
回答
9浏览
Vite 的 manualChunks 配置不生效是怎么回事？
我在 Vite 项目里想用 manualChunks 把 lodash 单独打包，但 build 之后发现它还是被打进 vendor 里了，根本没拆出来。 我试过在 vite.config.js 里这...
- 1
回答
14浏览
Vite 打包后首屏加载太慢，怎么优化？
我用 Vite + Vue3 开发了一个项目，本地开发时很快，但 build 之后首屏加载特别慢，Lighthouse 评分很低。我已经试过开启 brotli 压缩和分包，但效果不明显。 是不是我的组...
- 1
回答
18浏览
Vite 里怎么自定义 esbuild 的 JSX 配置？
我在用 Vite 搭建 React 项目，想让 esbuild 支持自动导入 React，但改了 build.jsxInject 好像没生效？ 试过在 vite.config.js 里加这个配置： e...
- 1
回答
18浏览
Vite库模式打包后入口文件路径不对怎么办？
我在用Vite的库模式打包组件库时遇到了问题，配置了build.lib.name为"my-lib"，但生成的dist文件夹里只有vendor.js，没有预期的main.js入口文件。查看构建日志没报错...
- 2
回答
17浏览
Vite插件处理CSS时怎么保留我写的特殊注释？
我在开发一个Vite插件时遇到个怪问题。我给CSS文件加了类似 /* component: header */ 的自定义注释，但构建后这些注释全被删掉了。查文档试过在vite.config.js里设置...
- 2
回答
57浏览
Vite开发服务器加载CSS变量时卡顿怎么办？
在Vite项目里写了base.css集中管理CSS变量，但开发时每次保存都卡几秒。尝试把变量拆分到组件内还是没改善，这是不是Vite的性能问题？ /* base.css */ :root { --pr...
开发阶段 Vite 会用
esbuild把每个模块（比如.jsx、.ts）单独编译成 ESM 模块，同时记录每个模块的依赖关系——比如A.jsx引了B.jsx，那依赖图里就会有个边A → B。这个依赖图存在内存里，不是靠 Webpack 那种静态分析打包出来的完整 bundle，而是按需实时返回的单个模块。当你改了某个文件，比如
Counter.jsx，Vite 的chokidar监听到文件变动，就会走一套叫transformRequest+moduleGraph的逻辑：- 先重新请求这个模块（触发一次编译，生成新代码和新的 module id）
- 然后根据模块图回溯它的「依赖链」：谁依赖了它？谁又依赖了谁？（用的是深度优先遍历）
- 如果这个模块是「HMR 边界模块」（比如它自己没被其他模块依赖，或者它的父级是 HMR boundary），那就直接更新它；否则就得往上找最近的 boundary
关键来了：Vite 的 HMR boundary 默认是入口模块或被动态
import()的模块，但 React 项目里一般用@vitejs/plugin-react，它内部加了个react-refresh插件，会自动识别出export default function Counter()这种组件，把它标记成可热更新的模块，然后生成一段 HMR runtime 代码注入到浏览器端。浏览器收到
{"type":"update","updates":[...]}这类消息时，会调用import.meta.hot.accept注册的回调，比如 React Refresh 的 runtime 会根据模块路径找到对应组件实例，只替换它的实现逻辑，不刷新整个页面。源码上你可以重点关注这几个文件（Vite 2.x/3.x）：
-
packages/vite/src/node/server/hmr.ts：处理 HMR 消息和模块更新逻辑-
packages/vite/src/node/server/transformRequest.ts：模块请求和缓存失效-
packages/plugin-react/src/plugin.ts：注入 react-refresh 的 HMR 逻辑说白了，Vite 不是靠猜测，而是靠精确的模块图 + ESM 动态引用 + runtime 注入的 accept 回调，才能做到「改哪更新哪」。这玩意儿比 Webpack 的 HotModuleReplacementPlugin 轻量多了，也快多了。