Module Federation 버전별 변화(1.0, 1.5, 2.0)
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *소프트웨어 개발자, 미들웨어 아키텍터, 마이크로프론트엔드 플랫폼 개발자**
- 난이도: 중급(Webpack, Rspack, Vite 사용 경험 필요)*
핵심 요약
- Module Federation 1.0은 Webpack 5에 강하게 결합된 초기 구현으로,
ModuleFederationPlugin을 통해 Container, Shared Dependencies 개념을 도입했다. - Module Federation 1.5는 Rspack 0.5.0에
runtimePlugins과shareStrategy기능을 추가해 런타임 제어와 공유 의존성 전략을 확장했다. - Module Federation 2.0은 Federation Runtime과 Manifest Protocol 도입으로 번들러 독립성 향상, 실시간 타입 지원, 메타데이터 기반의 고급 기능 구현을 가능하게 했다.
섹션별 세부 요약
1. Module Federation 1.0
- Webpack 5에 추가된 초기 버전으로,
ModuleFederationPlugin을 통해Container,Shared Dependencies개념을 정의했다. remoteEntry.js파일을 통해 Remote App 진입점을 정의하고, 빌드 시점에 모든 모듈 참조 관계를 정의해야 했음.- Webpack에 강하게 결합되어 있었으며, 런타임 통합 시 직접적인 코드 조작이 필요했다.
2. Module Federation 1.5
- Rspack 0.5.0에서 내장 플러그인으로 지원,
runtimePlugins과shareStrategy두 가지 주요 기능 추가. runtimePlugins은 런타임 모듈 생명주기(예:beforeInit,beforeLoadShare)에 개입할 수 있는 인터페이스 제공.shareStrategy는version-first(기본),loaded-first두 가지 공유 의존성 로딩 전략을 지원.- Webpack과 Rspack 기반 Container의 공존 예제 제공.
3. Module Federation 2.0
- Federation Runtime 도입으로
init,loadRemote함수를 통해 런타임 통합이 가능해짐. Manifest Protocol도입으로mf-manifests.json파일을 통해 Remote App의 메타데이터(예:assets,types)를 관리.- 타입 지원이 강화되어
d.ts파일을 통해 실시간 타입 정보를 제공. - 번들러 독립성 향상으로 Webpack, Rspack, Vite에서 동일한 런타임 사용 가능.
결론
- 2.0을 사용 시
@module-federation/enhanced/runtime을 직접 import하여 런타임 통합이 가능하며,mf-manifests.json을 통해 메타데이터를 활용하는 것이 권장됨. - 보수적 플랫폼에서는 번들러 통합과 정적 타입 처리가 필요하나, 고도화된 마이크로프론트엔드 구축에는 2.0의 기능이 유리.
- 예시 코드:
import { init, loadRemote } from '@module-federation/enhanced/runtime';
init({ name: 'host', remotes: [{ name: 'remoteA', entry: '/remotes/remoteA/mf-manifest.json' }] });
const Component = lazy(() => loadRemote('remoteA/Component'));