HMR이란? 번들러별 HMR 구현 방식

---

HMR이란?

• 변경된 코드 조각만 런타임에서 동적으로 교체하는 기능
• 번들러별 HMR 구현 방식

  • Metro: React Native 기본 번들러

    • 모듈을 전역에 등록한 뒤, 변경된 모듈만 교체하는 방식
    • 코드가 변경되면, 해당 모듈의 고유 ID를 찾아 업데이트
    • 변경된 부분만 새로운 코드로 교체
    • __d라는 함수를 사용해서 각 모듈에 고유한 ID를 부여하고, 이 ID를 이용해 런타임에서 모듈을 참조할 수 있도록 한다. 즉, 모듈이 런타임에서 교체 가능한 상태로 등록된다.

  • Webpack: 전통적인 HMR 방식

    • 런타임에 모듈을 등록한 뒤 관리하는 구조
    • (__webpack_modules__)를 활용하여 변경된 모듈만 교체
      1. 변경된 모듈을 감지하면, 서버가 새로운 코드 조각을 생성한다.
      2. 클라이언트에서 기존 모듈을 대체하는 방식으로 업데이트한다.
      3. 의존성 그래프를 추적하여 변경된 모듈을 참조하는 모든 상위 모듈도 갱신된다.

  • Vite: 네이티브 ESM을 활용한 HMR

    • 모던 번들러 중 하나인 Vite는 브라우저의 네이티브 ESM을 최대한 활용해, 불필요한 런타임 로직 없이 HMR을 구현한다.

    • 변경된 모듈의 URL에 타임 스탬프를 추가해 브라우저 캐시를 무효화한다.

    • 필요한 모듈만 다시 불러오기 때문에 빠르고 간단하게 HMR이 동작한다.

    • 예를 들어 foo.ts 파일을 변경하면 import 경로 뒤에 타임 스탬프가 붙어 새로운 모듈로 로드된다.

      ts

      import { foo } from "./foo.ts?t=1708957319787";

  • ESBuild: 초고속 번들링을 목표로 개발된 번들러. HMR(x)