Webpack 의존을 탈피하고 Vite/esbuild 기반으로 10배 빠른 빌드 성능을 달성하는 Angular 21 Native Federation 마이크로프론트엔드 구축 가이드를 제공한다

Context

기존 마이크로프론트엔드는 Webpack 기반 Module Federation에 강하게 의존해 설정 복잡성과 빌드 성능 저하 문제가 있었다. Import Maps 같은 브라우저 표준 기능을 활용하지 못해 프레임워크 간 통합에도 한계가 있었다.

Technical Solution

• Angular 21과 Native Federation 조합으로 Vite/esbuild 빌드 시스템 적용
• Shell이 JWT 인증, 동적 라우팅, NgRx Signals 기반 반응형 상태 공유를 중앙 집중 관리
• 각 Remote 앱(Auth, Dashboard, Settings)이 독립적으로 배포 가능하도록 설계
• @mfe/shared 라이브러리로 Tailwind 설정, Angular Material 테마, 공통 유틸리티 재사용
• DirectionService로 5개 이상의 마이크로앱에 일괄 RTL 방향 동기화

Impact

Webpack 대비 빌드 속도 10배 향상

Key Takeaway

마이크로프론트엔드는 Shell(오케스트레이터), Remotes(독립 배포), Shared Library(재사용) 3 pillars 구조로 설계하며, 중동 시장의 RTL 지원이 필요한 경우 중앙화된 DirectionService 도입이 필수다.