Native ESM과 esbuild 기반의 번들리스 아키텍처를 통한 즉각적 HMR 구현

Context

Webpack 등 기존 Bundler 기반 Dev Server는 파일 변경 시 전체 혹은 부분 번들 재빌드가 필요하여 프로젝트 규모 증가에 따라 Latency가 선형적으로 증가하는 한계 존재.

Technical Solution

• esbuild를 활용한 Dependency Pre-bundling으로 CommonJS를 ESM으로 변환하고 다수 파일을 단일 모듈로 병합하여 브라우저 요청 횟수 최적화
• Native ESM 기반의 No-bundle 전략을 통해 브라우저가 필요한 모듈만 요청하게 하여 프로젝트 크기와 무관한 즉각적 서버 기동 구현
• OS Native API(inotify, FSEvents 등)를 통한 Zero-polling 기반의 파일 시스템 이벤트 감지로 실시간 변경 사항 포착
• Lazy-loaded Module Graph 기반의 HMR Boundary 탐색을 통해 변경된 파일과 관련된 최소한의 서브트리만 갱신
• dynamic import와 Timestamp 기반의 Cache-busting 기법을 적용하여 브라우저가 최신 모듈을 즉시 Fetch하도록 설계
• React Fast Refresh 통합을 통해 컴포넌트 상태를 유지하며 UI만 부분 교체하는 효율적 렌더링 파이프라인 구축