ESBuild를 위한 HMR, 직접 만들기

간단 소개

ESBuild 기반 번들러에서 HMR을 직접 구현하는 과정과 핵심 전략, 그리고 다양한 번들러의 HMR 구현 방식을 비교 분석합니다.

AI Summary

HMR(Hot Module Replacement)의 개념 및 중요성
- HMR은 코드 수정 시 페이지 새로고침 없이 변경 사항을 즉시 반영하는 기술
- 프론트엔드 개발 생산성 향상에 기여하며, 상태 유지 기능 제공
다양한 번들러의 HMR 구현 방식 비교
- Metro: 모듈을 전역에 등록 후 변경된 모듈만 교체
- Webpack: 전역 객체를 활용하여 모듈 교체 및 의존성 그래프 갱신
- Vite: 네이티브 ESM을 활용, URL에 타임스탬프를 추가하여 캐시 무효화
ESBuild 기반 HMR 구현 과정 및 핵심 과제
- 런타임 모듈 접근을 위해 SWC 플러그인으로 코드 변환
- ESBuild의 onLoad 훅을 사용하여 모듈 ID를 생성하고, metafile 옵션을 활용해 의존성 그래프 구축
- 파일 변경 감지를 위한 별도 기능 구현 및 React 환경을 위한 추가 구현 (react-refresh 라이브러리 활용)
- 증분 빌드 구현으로 전체 앱 새로고침 시 빌드 최적화