피드로 돌아가기
Dev.toFrontend
원문 읽기
Control Flow 및 @defer 도입을 통한 YMS 번들 크기 최적화 및 렌더링 성능 개선
Migrando um YMS de 5 anos: Do Angular 16 ao 21 (Parte 4) - Templates Modernos: O Adeus ao *ngIf e *ngFor e a mágica do @defer
AI 요약
Context
5년 된 레거시 YMS 시스템의 Angular 16 환경에서 CommonModule 의존성에 따른 과도한 Boilerplate 발생 및 낮은 템플릿 가독성 문제 직면. 특히 대규모 데이터 리스트 렌더링 시 trackBy 미적용으로 인한 불필요한 Re-render링 및 무거운 컴포넌트의 초기 로딩으로 인한 UX 저하 발생.
Technical Solution
- CommonModule 의존성을 제거하고 컴파일러 내장형 Control Flow(@if, @for)를 도입하여 템플릿 구조 단순화
- @for 구문 내 track 절 의무화를 통한 DOM 요소의 고유 식별 및 불필요한 DOM 조작 최소화
- @defer 블록을 통한 Declarative Lazy Loading 구현으로 뷰포트 진입 시점에만 무거운 컴포넌트를 로드하는 전략 채택
- Esbuild 및 Vite 번들러와 @defer의 통합을 통해 컴포넌트 단위의 코드 스플리팅(Code Splitting) 자동화
- @placeholder 및 @loading 블록 설계를 통한 비동기 리소스 로딩 구간의 UX 공백 제거
- ng generate @angular/core:control-flow 스키마를 활용한 자동화된 마이그레이션 수행으로 휴먼 에러 방지
실천 포인트
1. 레거시 *ngFor 사용 시 trackBy 누락 여부를 전수 조사하고 @for의 track 구문으로 교체
2. 초기 렌더링에 불필요한 무거운 차트나 지도 컴포넌트를 @defer (on viewport)로 전환 검토
3. CommonModule 임포트 제거를 통해 컴포넌트 의존성 그래프를 경량화
4. 대규모 마이그레이션 시 수동 수정 대신 프레임워크 제공 자동화 스키마 우선 적용