上周三凌晨2点我正在用Vite开发一个内部的中后台项目突然发现src/components/Table下的代码改了五六次浏览器却死活不更新——F5手动刷新才生效。更诡异的是隔壁src/utils的改动却能正常热更新。你遇到过这种看人下菜碟的HMR吗今天我们就撕开Vite HMR的遮羞布。1. 失效的HMR背后文件监听与依赖图当你修改文件时Vite的HMR流程是这样的文件监听chokidar检测到文件变更依赖分析Vite通过moduleGraph找到受影响模块边界判定Vue/React组件会检查Accept边界消息推送通过WebSocket通知浏览器更新问题往往出在第二步。Vite默认只监听项目根目录下的文件通过server.watch配置而你的node_modules、.git等目录会被忽略。但是如果你的项目结构是这样的├── src │ ├── components │ │ └── Table # 热更新失效 │ └── utils # 热更新正常 └── lib # 外部软链目录而你的vite.config.js里恰好有这么一段export default { server: { watch: { // 错误忽略整个lib目录会导致内部文件变更不被监听 ignored: [lib/**] } } }根因lib/Table的实际代码在另一个仓库通过npm link软链到当前项目。Vite的默认忽略规则 不完整的watch配置导致软链目录下的文件变更直接丢失监听事件。2. 那些年我们填过的HMR坑坑点1软链接与真实路径的博弈用realpathSync打印下路径你就明白了// 在vite.config.js中添加调试代码 console.log(fs.realpathSync(lib/Table)) // 输出: /Users/you/other-repo/src/Table解决方案告诉Vite别忽略软链目标路径export default { server: { watch: { ignored: [ // 保留默认忽略项但排除我们的软链目录 !**/other-repo/src/** ] } } }坑点2Vue文件的Accept边界有时候不是Vite的锅。比如你写了个这样的Vue组件!-- 错误示例缺乏accept导致HMR断裂 -- script export default { data() { return { count: 0 } } } /script改成显式声明HMR接受script const component { data() { return { count: 0 } } } // 关键让Vue loader建立HMR边界 if (import.meta.hot) { import.meta.hot.accept((newModule) { newModule.component.update() }) } /script坑点3第三方插件的中间件冲突某次我给Vite添加了自定义插件// 错误示例插件篡改了HMR消息体 vitePlugin({ configureServer(server) { server.middlewares.use((req, res, next) { if (req.url.includes(hot-update)) { res.write(transform(res.read())) // 破坏性的消息转换 } next() }) } })教训处理HMR请求时永远保持WS消息的原始结构。3. 性能与稳定性的隐藏成本在我的测试项目中对100个组件文件进行修改场景平均HMR耗时成功率默认配置320ms92%正确配置软链监听350ms100%错误的ignore规则∞ (失效)0%多出30ms的代价换来了稳定性这买卖不亏。4. 防脱发指南HMR避坑清单检查软链接用ls -l确认文件是否在真实项目路径下调试监听规则在Vite启动时加上--debug参数查看watch事件降级保平安遇到诡异问题时先尝试禁用所有插件版本锁定确保vite和vitejs/plugin-vue等核心插件版本兼容网络检查HMR依赖WebSocket代理或防火墙可能拦截ws消息写在最后Vite的HMR不是银弹——它快如闪电的前提是你的项目结构符合它的预期。下次遇到HMR失效时先别急着骂街打开Chrome开发者工具的Network面板过滤hot-update请求看看WS消息是否正常到达。你在项目里还遇到过哪些奇葩的HMR场景是插件冲突还是配置玄学评论区交出你的血泪史。
为什么我的Vite项目热更新老是失灵？
上周三凌晨2点我正在用Vite开发一个内部的中后台项目突然发现src/components/Table下的代码改了五六次浏览器却死活不更新——F5手动刷新才生效。更诡异的是隔壁src/utils的改动却能正常热更新。你遇到过这种看人下菜碟的HMR吗今天我们就撕开Vite HMR的遮羞布。1. 失效的HMR背后文件监听与依赖图当你修改文件时Vite的HMR流程是这样的文件监听chokidar检测到文件变更依赖分析Vite通过moduleGraph找到受影响模块边界判定Vue/React组件会检查Accept边界消息推送通过WebSocket通知浏览器更新问题往往出在第二步。Vite默认只监听项目根目录下的文件通过server.watch配置而你的node_modules、.git等目录会被忽略。但是如果你的项目结构是这样的├── src │ ├── components │ │ └── Table # 热更新失效 │ └── utils # 热更新正常 └── lib # 外部软链目录而你的vite.config.js里恰好有这么一段export default { server: { watch: { // 错误忽略整个lib目录会导致内部文件变更不被监听 ignored: [lib/**] } } }根因lib/Table的实际代码在另一个仓库通过npm link软链到当前项目。Vite的默认忽略规则 不完整的watch配置导致软链目录下的文件变更直接丢失监听事件。2. 那些年我们填过的HMR坑坑点1软链接与真实路径的博弈用realpathSync打印下路径你就明白了// 在vite.config.js中添加调试代码 console.log(fs.realpathSync(lib/Table)) // 输出: /Users/you/other-repo/src/Table解决方案告诉Vite别忽略软链目标路径export default { server: { watch: { ignored: [ // 保留默认忽略项但排除我们的软链目录 !**/other-repo/src/** ] } } }坑点2Vue文件的Accept边界有时候不是Vite的锅。比如你写了个这样的Vue组件!-- 错误示例缺乏accept导致HMR断裂 -- script export default { data() { return { count: 0 } } } /script改成显式声明HMR接受script const component { data() { return { count: 0 } } } // 关键让Vue loader建立HMR边界 if (import.meta.hot) { import.meta.hot.accept((newModule) { newModule.component.update() }) } /script坑点3第三方插件的中间件冲突某次我给Vite添加了自定义插件// 错误示例插件篡改了HMR消息体 vitePlugin({ configureServer(server) { server.middlewares.use((req, res, next) { if (req.url.includes(hot-update)) { res.write(transform(res.read())) // 破坏性的消息转换 } next() }) } })教训处理HMR请求时永远保持WS消息的原始结构。3. 性能与稳定性的隐藏成本在我的测试项目中对100个组件文件进行修改场景平均HMR耗时成功率默认配置320ms92%正确配置软链监听350ms100%错误的ignore规则∞ (失效)0%多出30ms的代价换来了稳定性这买卖不亏。4. 防脱发指南HMR避坑清单检查软链接用ls -l确认文件是否在真实项目路径下调试监听规则在Vite启动时加上--debug参数查看watch事件降级保平安遇到诡异问题时先尝试禁用所有插件版本锁定确保vite和vitejs/plugin-vue等核心插件版本兼容网络检查HMR依赖WebSocket代理或防火墙可能拦截ws消息写在最后Vite的HMR不是银弹——它快如闪电的前提是你的项目结构符合它的预期。下次遇到HMR失效时先别急着骂街打开Chrome开发者工具的Network面板过滤hot-update请求看看WS消息是否正常到达。你在项目里还遇到过哪些奇葩的HMR场景是插件冲突还是配置玄学评论区交出你的血泪史。
