피드로 돌아가기
Dev.toFrontend
원문 읽기
Webpack Module Federation 기반 Remote App 동적 로드 구조 설계
Setting Up the Remote Project for React Micro Frontends
AI 요약
Context
단일 거대 프론트엔드(Monolithic Frontend)의 배포 의존성과 빌드 시간 증가 문제 해결 필요. 독립적인 배포와 실행이 가능한 Micro Frontends 아키텍처를 통한 개발 생산성 향상 추구.
Technical Solution
- Module FederationPlugin 도입을 통한 런타임 코드 공유 및 동적 모듈 로딩 구현
- remoteEntry.js 파일 생성을 통한 Remote App의 진입점 정의 및 Shell App으로의 인터페이스 노출
- singleton 설정을 통한 React, ReactDOM 등 공통 라이브러리의 중복 로드 방지 및 메모리 효율화
- bootstrap.js 분리를 통한 비동기 로딩 구조 설계로 모듈 로드 완료 전 렌더링 시도에 따른 런타임 오류 방지
- publicPath 명시적 설정을 통한 런타임 시 에셋의 정확한 절대 경로 참조 보장
실천 포인트
- Module Federation 적용 시 shared 설정에 singleton: true 옵션을 부여하여 라이브러리 버전 충돌 방지 - index.js에서 bootstrap.js를 dynamic import 하여 런타임 의존성 해결 시간 확보 - Remote App의 노출 컴포넌트 경로를 exposes 필드에 명확히 정의하여 인터페이스 일관성 유지