hmr

live reload - 检测到变化刷新页面
- 通常使用一个 EventSource - SSE
- esbuild#802
HMR - Hot Module Replacement - Hot Module Reload
- 强调保留状态
- Webpack
  - Concept
  - API
- Vite HMR API
  - 接口与 Webpack 类似但不相同
React Fast Refresh
- HMR 更进一步 - 组件纬度
- 支持的 bundler
  - rn, parcel2, webpack, cra, nextjs, vite
- 检测到变化，更新组件，re-render
- 如果 exports 不止 react 组件，还会更新其他 import 依赖
- prevExports
  - 上次的组件
- reactnative.dev/docs/fast-refresh
- react-hot-loader
  - fast refresh 之前的方案

Vite HMR

TypeScript

interface ImportMeta {
  // 判断当前是否为 HMR 环境
  readonly hot?: ViteHotContext;
}

type ModuleNamespace = Record<string, any> & {
  [Symbol.toStringTag]: 'Module';
};

interface ViteHotContext {
  // 持久化数据
  readonly data: any;

  // 接受新的模块 - HMR boundary
  accept(): void;
  accept(cb: (mod: ModuleNamespace | undefined) => void): void;
  accept(dep: string, cb: (mod: ModuleNamespace | undefined) => void): void;
  accept(deps: readonly string[], cb: (mods: Array<ModuleNamespace | undefined>) => void): void;

  // 销毁前回调
  dispose(cb: (data: any) => void): void;
  // 不可 HMR
  decline(): void;
  invalidate(): void;

  // vite:beforeUpdate, vite:beforeFullReload, vite:beforePrune, vite:invalidate, vite:error
  // `InferCustomEventPayload` provides types for built-in Vite events
  on<T extends string>(event: T, cb: (payload: InferCustomEventPayload<T>) => void): void;
  send<T extends string>(event: T, data?: InferCustomEventPayload<T>): void;
}

react refresh

JavaScript

// reload
/* @refresh reset */

Vite HMR

react refresh

关联信息

References

On this page