피드로 돌아가기
Dev.toFrontend
원문 읽기
Astro 도입으로 React 대비 JS 번들 94% 절감, 3.17 kB 달성
Astro Port: 3.17 kB Gzip, 94% vs React, New Series Record — Because the Framework Runtime Is Literally Zero
AI 요약
Context
기존 Framework 기반 렌더링 방식은 런타임 라이브러리가 번들에 포함되어 불필요한 오버헤드를 발생시킴. 특히 단순 인터랙션 위주의 페이지에서도 Virtual DOM 및 상태 관리 런타임이 필수적으로 포함되는 구조적 한계 존재.
Technical Solution
- Zero JS by default 원칙에 기반한 Build-time HTML 생성 구조 채택
- Framework Runtime을 완전히 배제하고 애플리케이션 로직만 번들에 포함하는 설계
- Islands Architecture 대신 Vanilla TypeScript 블록을 활용한 직접적인 DOM 조작 방식 구현
- Vite 기반 빌드 프로세스를 통한 TypeScript 지원 및 Tree-shaking 최적화 적용
- Pure Function으로 구성된 공유 비즈니스 로직(filter.ts)을 활용해 프레임워크 의존성 제거
- 정적 콘텐츠는 HTML로 처리하고 동적 인터랙션만 최소한의 JS로 연결하는 전략 수립
실천 포인트
- Virtual DOM이나 세밀한 Reactivity가 불필요한 단순 페이지인지 검토 - JS 실행 비용이 HTML 파싱 비용보다 훨씬 높다는 점을 고려한 전송 전략 수립 - 프레임워크 의존성이 없는 Pure Function 기반의 비즈니스 로직 분리 설계 적용