Hot Module Replacement (Hot-Reloading)

HMR(Hot Module Replacement)

애플리케이션 개발 중 코드 변경 시, 애플리케이션 전체를 다시 로드하지 않고 변경된 사항만 업데이트하는 기능. 수정한 사항을 빠르게 확인할 수 있어서, 개발 속도를 향상시킨다. 

 

현대 프론트엔드 프레임워크를 사용해 프로젝트를 생성하면, 함께 제공되는 번들러가 기본적으로 HMR를 지원하여 따로 설정해주지 않아도 HMR 기능을 사용할 수 있다. 

 

대표적인 번들러 Webpack에서 HMR은 어떻게 동작할까?

 

Webpack에서의 HMR

🔥hot 옵션을 활성화하면 HMR을 사용할 수 있다.

// webpack.config.js
module.exports = {
  //...
  devServer: {
    hot: true,
  },
};

 

 

Webpack은 Webpack Development Server(webpack-dev-server) 내부에 HMR 서버를 생성하고, 웹 소켓을 통해 브라우저의 HMR 런타임과 통신하여 HMR 기능을 제공한다.

https://blog.bitsrc.io/webpacks-hot-module-replacement-feature-explained-43c13b169986

 

watch

파일이 변경되면 이를 감지하고 다시 컴파일한다.

watch 모드는 webpack-dev-server 및 webpack-dev-middleware에서 기본적으로 활성화되어 있다. 

 

컴파일러

• 변경 사항에 대한 업데이트를 HMR 서버로 전송한다.
  • 업데이트된 매니페스트 (JSON): 새 컴파일 해시와 업데이트된 모든 청크 목록 포함
  • 업데이트된 청크 (Javascript)

 

애플리케이션

1. HMR 런타임에 업데이트 체크 요청을 보낸다.

2. 업데이트가 있다면 업데이트를 비동기적으로 다운로드받고, 애플리케이션에 알려준다.

3. 애플리케이션은 업데이트를 적용하도록 런타임에 요청한다.

4. 런타임은 동기적으로 업데이트를 적용한다. 

 

HMR 런타임

애플리케이션이 실행되는 동안 컴파일러와 통신하며 업데이트를 관리한다. CSS, Javascript가 변경되면 CSS 로더, Style 로더, Babel 로더 등을 호출하여 처리한다.

 

애플리케이션에서 "체크 요청"이 들어오면, HMR 서버에 메니페스트 HTTP 요청

• 요청이 실패하면, 가능한 업데이트가 없음을 의미
• 성공하면, 업데이트된 청크 목록과 현재 로드된 청크 목록 비교 및 업데이트 청크 다운로드
  • 적용할 준비가 되면 ready 상태로 전환

 

 

참고

https://blog.bitsrc.io/webpacks-hot-module-replacement-feature-explained-43c13b169986

Webpack’s Hot Module Replacement Feature Explained

 

https://webpack.kr/concepts/hot-module-replacement/

Hot Module Replacement | 웹팩