피드로 돌아가기
Dev.toFrontend
원문 읽기
42KB 런타임 제거를 통한 3KB 초경량 UI 라이브러리 설계
What Is Preact and Why Does a 3KB Version of React Exist
AI 요약
Context
React는 광범위한 하위 호환성과 고도화된 런타임 기능을 위해 약 45KB의 번들 크기를 유지함. 이로 인해 저사양 기기에서의 JS Parse Time 증가 및 리소스 낭비라는 제약 사항이 발생함.
Technical Solution
- Synthetic Event System 제거를 통한 Native Browser Event 직접 바인딩 구조 채택
- Legacy Context API 지원 코드를 배제하고 최신 createContext API만 유지하는 단순화 전략
- Fiber Scheduler 및 Concurrent Mode 인프라를 제거한 동기적 업데이트 처리 방식 도입
- preact/compat 계층을 통한 React API Alias 설정을 지원하여 마이그레이션 비용 최소화
- 불필요한 개발 모드 툴링 및 내부 인프라 제거로 코어 런타임 최적화
Impact
- 번들 크기 45KB(React)에서 3KB(Preact)로 약 93% 감소
- preact/compat 적용 시에도 전체 크기를 4~5KB 수준으로 유지하여 전송 효율 극대화
- 저사양 Android 기기에서의 JS Parse Time 유의미한 단축
Key Takeaway
범용성을 위한 기능 추가는 반드시 런타임 비용을 수반하므로, 서비스 타겟 디바이스의 성능 제약과 필요 기능 집합을 정의하여 라이브러리 무게를 결정해야 함.
실천 포인트
- 저사양 디바이스 타겟 서비스나 임베디드 위젯 설계 시 Preact 검토 - Concurrent Mode(useTransition, Suspense 등) 필요 여부 확인 후 라이브러리 선택 - 기존 React 프로젝트의 경우 마이그레이션 리스크 대비 성능 이득률 산출 후 결정 - 번들 크기가 Parse Time에 미치는 영향을 하드웨어 수준에서 측정