Vite Dev Server 이해하기 (feat. HMR)

// https://github.com/vitejs/vite/blob/v5.0.12/packages/vite/src/node/server/index.ts#L385
// server/index.ts
export async function _createServer(
  inlineConfig: InlineConfig = {},
  options: { ws: boolean },
): Promise<ViteDevServer> {
  // connect를 사용해 express와 같은 미들웨어 구조를 가진다.
  const middlewares = connect() as Connect.Server
 
  // HTTP 서버와 웹 소켓 서버를 생성한다.
  const httpServer = await resolveHttpServer(serverConfig, middlewares, httpsOptions)
  const ws = createWebSocketServer(httpServer, config, httpsOptions)
 
  // 파일 변경 감지를 위해 chokidar를 설정한다.
  const watcher = chokidar.watch((...) as FSWatcher)
 
  // 의존성 관계를 추적할 수 있는 모듈 그래프를 만든다. HMR 및 트리쉐이킹 같은 최적화 작업을 위해 존재한다.
  // 서버 초기화 단계에서는 그래프가 비어있다.
  const moduleGraph: ModuleGraph = new ModuleGraph(...)
 
  // Rollup의 플러그인 컨테이너를 활용해 플러그인 구성을 만든다.
  const container = await createPluginContainer(config, moduleGraph, watcher)
 
  // ...
}

// server/index.ts
middlewares.use(indexHtmlMiddleware(root, server))
 
// https://github.com/vitejs/vite/blob/v5.0.12/packages/vite/src/node/server/middlewares/indexHtml.ts#L438
// HTML 파일을 처리하고 변환한다. 스크립트 태그 주입 및 HMR 클라이언트 코드 삽입, 모듈 경로 변환 등의 작업을 한다.
html = await server.transformIndexHtml(url, html, req.originalUrl)
 
// transform
export function createDevHtmlTransformFn(...) {
  // 필요한 플러그인의 실행 시점에 따라 분류한다.
  const [preHooks, normalHooks, postHooks] = resolveHtmlTransforms(...)
  return (...) => {
    // html에 반영한다.
    return applyHtmlTransforms(
      html,
      [
        preImportMapHook(config),
        ...preHooks,
        // ...
      ],
      { ... },
    )
  }
}

// 만약 index.html에서 해당 파일을 import 한다고 가정해 보자.
// playground/hmr/hmr.ts
import { foo as depFoo, nestedFoo } from './hmrDep'
import './importing-updated'
import './invalidation/parent'
 
// hmr.ts 파일에 구성된 모듈 의존성 그래프
ModuleNode {
  url: '/hmr.ts',
  file: '/User/user/VSCode/vite/playground/hmr/hmr.ts',
  type: 'js',
  // 클라이언트 측에서 사용되는 모듈들, 즉 브라우저에서 실행되는 모듈들의 목록을 추적하는 데 사용된다.
  clientImportModules: Set(10) {
    // 재귀적 구조
    ModuleNode: {
      url: '/hmrDep.js' // hmr.ts 내부에서 import 되는 hmrDep 이 추가된 모습.
      file: '/User/user/VSCode/vite/playground/hmr/hmrDep.js',
      clientImportModules: Set(10) {
        ModuleNode: { ... }
    }.
    ModuleNode: {
      url: '/importing-updated/index.js', // hmr.ts 내부에서 import 되는 importing-updated가 추가된 모습.
      file: '/User/user/VSCode/vite/playground/hmr/importing-updated/index.js',
      // ...
    }
  // ...

// server/index.ts
// main transform middleware
middlewares.use(transformMiddleware(server))
 
// https://github.com/vitejs/vite/blob/v5.0.12/packages/vite/src/node/server/middlewares/transform.ts#L175
export function transformMiddleware(...) {
  // resolve, load and transform using the plugin container
  const result = await transformRequest(url, server, {
    html: req.headers.accept?.includes('text/html'),
  })
  if (result) {
    // transform된 코드, 소스코드를 캐시 설정해 리턴한다.
    return send(req, res, result.code, type, {
      etag: result.etag,
      cacheControl: isDep ? 'max-age=31536000,immutable' : 'no-cache',
      headers: server.config.server.headers,
      map: result.map,
    })
  }
}

<!-- 
  import.meta.hot.accept가 코드에 있다면 HMR을 허용한 파일이라고 인식한다.
  importAnalysis 플러그인이 createHotContext를 추가한다. -->
<script type="module">
  if (import.meta.hot) {
    // https://vitejs.dev/guide/api-hmr#hot-accept-cb
    import.meta.hot.accept((param) => {
      console.log('param', param);
    });
  }
</script>

function setupWebSocket(...) {
  const socket = new WebSocket(`${protocol}://${hostAndPath}`, 'vite-hmr')
  socket.addEventListener('message', async ({ data }) => {
    handleMessage(JSON.parse(data))
  });
}

// AS-IS 원본 코드
import { h, render } from 'preact';
import App from './MyComponent';
 
render(<App />, document.getElementById('app'));
 
// TO-BE 변경된 코드
import { render } from '/node_modules/.vite/deps/preact.js';
import { jsxDEV as _jsxDEV } from '/node_modules/.vite/deps/preact_jsx-dev-runtime.js';
import App from '/src/MyComponent';
 
render(_jsxDEV(App, ...), document.getElementById('app'))

watcher.on('change', async (file) => {
  file = normalizePath(file);
  // 플러그인 컨테이너에게 update 이벤트 발송. 플러그인에서 필요시 실행된다.
  await container.watchChange(file, { event: 'update' });
  // 의존성 그래프에 변경사항 체크
  moduleGraph.onFileChange(file);
  // 대망의 HMR 업데이트 시작
  await onHMRUpdate(file, false);
});

function onHMRUpdate() {
  // 관련 플러그인 훅 실행
  for (const hook of config.getSortedPluginHooks('handleHotUpdate')) {
    const filteredModules = await hook(hmrContext)
  }
  ...
  updateModules(...)
}
 
function updateModules(...) {
  for (const mod of modules) {
    const boundaries: PropagationBoundary[] = []
    // 모듈 그래프 갱신
    const hasDeadEnd = propagateUpdate(mod, traversedModules, boundaries)
    moduleGraph.invalidateModule(mod, invalidatedModules, timestamp, true)
  }
  // 소켓 메시지 전송
  ws.send({ type: 'update', updates })

// Step 1.
// @vite/client.ts
case 'update':
  notifyListeners('vite:beforeUpdate', payload);
  await Promise.all(payload.updates.map(async(update)=> {
      if (update.type === 'js-update') {
            // queueUpdate는 업데이트 목록의 순서를 유지해준다.
            return queueUpdate(hmrClient.fetchUpdate(update))
      }
      // ... CSS update는 생략
  });
  notifyListeners('vite:afterUpdate', payload);
 
// Step 2.
// HMRClient > fetchUpdate
fetchUpdate(...) {
  fetchedModule = await this.importUpdatedModule(update);
 
// client/client.ts > importUpdatedModule
async function importUpdatedModule(...) {
  // Step 3.
  const importPromise = import(
    /* @vite-ignore */
    base +
      acceptedPathWithoutQuery.slice(1) +
      `?${explicitImportRequired ? 'import&' : ''}t=${timestamp}${
        query ? `&${query}` : ''
      }`
  )
  return await importPromise
},

// vite.config.ts
import preact from '@preact/preset-vite';
 
export default defineConfig({
  // Step 1. preact 플러그인 호출
  plugins: [preact()],
});
 
// Step2 2. preact 플러그인에서 prefresh가 호출되면서 소스코드를 transform 한다.
return {
  code: `${prelude}${result.code}
  if (import.meta.hot) {
    self.$RefreshReg$ = prevRefreshReg;
    self.$RefreshSig$ = prevRefreshSig;`
    // 중요! Step 3. 해당 코드 덕에 HMR로 인식, Dev Server에서 호출되며 flushUpdate 실행
    `import.meta.hot.accept((m) => {
      try {
        flushUpdates();`
 
// Step 4. 실제 코드 변경 부분.
function flushUpdates() {
  self.__PREFRESH__.replaceComponent(prev, next, true);