Svelte 기반 Microfrontends 도입으로 런타임 오버헤드 제거 및 번들 크기 90% 이상 절감

Context

이커머스 플랫폼과 같이 규모가 큰 프론트엔드 애플리케이션에서 Monolithic 아키텍처로 인한 배포 병목과 팀 간 코드 간섭 발생. 독립적인 배포 주기 확보와 기술 스택의 유연성을 위해 Microfrontends 전환이 필요했던 상황.

Technical Solution

• Compiler-based 접근법을 통한 Runtime Framework 제거로 브라우저 오버헤드 최소화
• Vite Module Federation 기반의 공유 의존성 관리 및 원격 컴포넌트 동적 로딩 구조 설계
• Web Components 표준 활용을 통해 프레임워크 종속성을 제거한 범용 컴포넌트 인터페이스 구현
• Scoped CSS의 기본 적용을 통한 Microfrontend 간 스타일 충돌 방지 및 격리 보장
• Custom Event를 활용한 Loosely Coupled 상태의 컴포넌트 간 메시지 통신 체계 구축
• 직접적인 DOM 업데이트 방식으로 Virtual DOM Diffing 과정의 CPU 및 메모리 비용 제거