Ivy 렌더링 엔진과 esbuild 도입을 통한 Angular 빌드 및 런타임 최적화

Context

View Engine의 글로벌 컴파일 방식으로 인한 낮은 Tree-shaking 효율과 거대한 번들 사이즈 문제 분석. 기존 Webpack 기반 빌드 시스템의 느린 HMR 및 컴파일 속도로 인한 개발 생산성 저하 상황 직면.

Technical Solution

• Local Compilation 방식을 채택한 Ivy 엔진 도입으로 미사용 프레임워크 코드 제거 및 Tree-shaking 효율 극대화
• Virtual DOM 대신 Incremental DOM 구조를 적용하여 예측 가능한 메모리 할당 및 런타임 오버헤드 최소화
• ngtsc 컴파일러 플러그인을 통한 데코레이터의 정적 필드(ɵfac, ɵcmp 등) 변환으로 런타임 오버헤드 제거
• Webpack을 esbuild로 대체하여 Native ESM 지원 및 빌드 파이프라인 최적화
• AOT(Ahead-of-Time) 컴파일 강제로 브라우저 내 컴파일러 포함을 배제하고 초기 구동 속도 개선

Impact

• esbuild 마이그레이션을 통한 개발 빌드 속도 2~10배 향상
• AOT 적용 시 브라우저 전송 번들 사이즈 약 500KB 절감

Key Takeaway

컴파일 단계에서 정적 분석을 통해 런타임 비용을 빌드 타임으로 전이시키는 전략이 프론트엔드 성능 최적화의 핵심임.