Vite HMR 深入：热更新机制、模块边界与自定义 HMR

1. 你保存文件 → 文件系统变更
2. Vite 开发服务器检测到变更 → 定位受影响的模块
3. 只重新转换「该模块」→ 生成新模块内容（esbuild 增量）
4. 通过 WebSocket 推送更新包到浏览器
5. 浏览器按模块边界 accept → 执行更新回调（替换组件实例/样式）
6. 其他模块依赖关系经 HMR 图传播，必要时级联更新

main.ts
 └─ import App.vue
     ├─ import './style.css'
     └─ import { useStore } from './store'
         └─ import { db } from './db'

反向依赖：谁 import 了 App.vue？→ main.ts（未 accept）
正向边界：App.vue 自身 accept？→ 是（Vue 插件注入）→ 热更新成功

// demo.js
export const count = 0
if (import.meta.hot) {
  import.meta.hot.accept()   // 接受自身热更新
}

import { heavyFn } from './heavy.js'

export function render() { return heavyFn() }

if (import.meta.hot) {
  // 只接受 heavy.js 的更新，本模块不重跑
  import.meta.hot.accept('./heavy.js', (newMod) => {
    console.log('heavy.js 更新，跳过重渲染')
  })
}

// @vitejs/plugin-vue 内部（简化示意）
export default {
  transform(code, id) {
    // 把 .vue 的 script 部分重写，注入 HMR 边界
    if (id.endsWith('.vue')) {
      return code + `
        import { createHotContext as __vite__createHotContext } from "/@vite/client"
        import.meta.hot = __vite__createHotContext("${id}")
        // 组件级 HMR：只重渲染当前组件，保留兄弟组件状态
        import.meta.hot.accept(({ default: updated }) => {
          __VUE_HMR_RUNTIME__.reload(component, updated)
        })
      `
    }
  },
}

if (import.meta.hot) {
  // 接受自身更新，可拿到新模块
  import.meta.hot.accept((newMod) => {
    // 用新模块替换旧实例
  })

  // 监听模块被弃用（自身将被替换）
  import.meta.hot.dispose(() => {
    // 清理副作用：定时器/事件/全局注册
    clearInterval(timer)
  })

  // 模块被移除时
  import.meta.hot.prune(() => {
    cleanup()
  })

  // 触发自定义更新（由插件 handleHotUpdate 响应）
  import.meta.hot.send('my:custom-event', { payload: 1 })

  // 模块被替换前
  import.meta.hot.invalidate()   // 使失效，向上传播
}

// src/counter.js
let count = 0
const timer = setInterval(() => {
  count++
  console.log('count:', count)
}, 1000)

export function getCount() { return count }

if (import.meta.hot) {
  import.meta.hot.dispose(() => clearInterval(timer))   // 换新前清理旧定时器
  import.meta.hot.accept()                              // 接受更新
}

// vite.config.ts —— 自定义文件类型的热更新
export default {
  plugins: [
    {
      name: 'my-json-hmr',
      handleHotUpdate(ctx) {
        // ctx.file 是变更的文件，ctx.modules 是受影响的模块
        if (ctx.file.endsWith('.json')) {
          // 定制更新内容：只通知客户端，不重载
          ctx.server.ws.send({
            type: 'custom',
            event: 'my-json-updated',
            data: { file: ctx.file },
          })
          // 返回空数组 → 阻止默认 HMR 传播
          return []
        }
      },
    },
  ],
}

import.meta.hot?.on('my-json-updated', (data) => {
  console.log('JSON 更新:', data.file)
  // 自己决定如何刷新 UI
})

export default {
  name: 'virtual-config-hmr',
  resolveId(id) {
    if (id === 'virtual:config') return '\0virtual:config'
  },
  load(id) {
    if (id === '\0virtual:config') return `export default ${JSON.stringify(readConfig())}`
  },
  handleHotUpdate(ctx) {
    if (ctx.file === CONFIG_PATH) {
      // 失效虚拟模块并推送更新
      const mod = ctx.server.moduleGraph.getModuleById('\0virtual:config')
      if (mod) ctx.server.reloadModule(mod)
    }
  },
}

1. 看终端：Vite 打印「hmr update」还是「full reload」
2. 看浏览器 console：有无 hmr 报错/边界警告
3. 手动触发：改后再加一行 console，确认模块是否重跑

export default {
  server: {
    hmr: {
      host: 'localhost',
      protocol: 'ws',
      port: 5173,
      // 或通过 overlay 配置代理: server.hmr.clientPort
    },
  },
}

# dev 时终端开启 debug 日志
DEBUG=vite:hmr npm run dev
# 观察每次 hmr 的传播模块数与耗时

开发：模块图 + WebSocket + import.meta.hot → 增量热更
生产：Rollup 打包 → 静态资源 → 无 HMR（靠页面加载）