Module Federation 2.0 변경점 공식문서[번역]
Webpack 5에서 도입된 Module Federation은 지난 2020년 10월 Webpack 5에서 정식 릴리즈 되었으며 2024년 4월 MF 2.0이 도입됨.
Module Federation의 등장 배경으로 기존에는 서로 다른 팀이 만든 애플리케이션을 통합하거나 코드 분산 및 동적 로딩을 하기가 매우 어려웠음.
특히 Micro Frontend 아키텍처 구현에 있어 코드 공유와 런타임 통합이 복잡했기 때문에, 이를 해결하고자 MF가 도입됨.
이 모듈 공유 솔루션은 특히 대규모 웹 프로젝트에서 널리 채택되었고,
대규모 애플리케이션 개발의 효율성과 단순성, 팀 간 협업을 크게 향상시킴.
하지만 사용이 확산되면서 새로운 과제들도 생겨났고,
이에 대응하기 위해 Module Federation 2.0에서는 여러 가지 개선 사항이 도입됨.
아래는 MF 2.0 문서를 번역한 내용.
(https://module-federation.io/blog/announcement)
📘1. 새로운 문서 사이트 제공
새 문서 사이트에서는 Module Federation 프레임워크가 적용 가능한 시나리오와 기능들을 상세히 소개하고 있어.
Rspack을 활용한 프로젝트 시작부터 기능 활용까지의 전체 흐름을 다루며,
플러그인 구성에 대한 깊이 있는 설명도 포함되어 있어.
🔄2. 모듈 로딩 유연성 강화
이번 버전에서는 큰 변화가 있어.
기존에는 Webpack 내부에 있던 런타임 기능이 분리되어 독립된 SDK 형태로 제공돼.
이로 인해 빌드 도구에 의존하지 않고도 remote/shared 모듈을 동적으로 등록하고 로드할 수 있게 되었어.
또한, 모듈 사전 로딩(preloading)이나 런타임 플러그인 사용도 개선되어
모듈 로딩을 더 세밀하게 제어할 수 있어.
import { init, loadRemote } from '@module-federation/enhanced/runtime';
init({
name: '@demo/app-main',
remotes: [
{
name: "@demo/app1",
entry: "http://localhost:3005/mf-manifest.json",
alias: "app1"
},
{
name: "@demo/app2",
entry: "http://localhost:3006/remoteEntry.js",
alias: "app2"
},
],
});
loadRemote("app2/util").then((md)=>{
md.add(1,2,3);
})⚙️3. Webpack 의존성 제거 및 다양한 빌드 도구 지원
Module Federation 2.0은 런타임 아키텍처를 완전히 재설계했어.
덕분에 Webpack에 묶여있지 않고,
여러 빌드 도구에서 만들어진 결과물도 서로 연결해 조립할 수 있어.
현재는 Webpack과 Rspack을 공식 지원하고 있고,
다른 빌드 도구들도 이 표준 기반으로 Module Federation을 구현할 수 있어.
결과적으로 런타임의 일관성과 표준화가 가능해졌지.
🧠4. 타입 힌트 지원
가장 혁신적인 기능 중 하나는 동적 모듈 타입 힌트야!
기존에는 로컬 모듈을 remote 모듈로 전환하면 TypeScript의 타입 정보가 손실됐는데,
이제는 자동으로 타입을 생성하고 불러올 수 있어.
심지어 로컬에서 모든 프로젝트가 실행 중일 땐,
npm link처럼 실시간 타입 업데이트까지 가능해.
📄5. Manifest 프로토콜 도입
Module Federation의 빌드 플러그인은 mf-manifest.json이라는 Manifest 파일을 생성해.
여기엔 다음과 같은 시스템 정보가 담겨 있어:
remoteEntry, shared, exposes, remotes, chunks, type 등
이 정보를 활용해서 프로젝트 간 의존성 분석,
버전/그레이 릴리즈 관리,
고급 기능 구현(예: 타입 힌트) 등이 가능해져.
런타임에서도 이 Manifest 파일을 활용할 수 있어.
🚀향후 계획 > 고성능 전략 도입
Micro-Frontend의 구조적 특성상 발생하는 요청 지연(waterfall) 문제를 해결하기 위해
SSR(Server-Side Rendering), 데이터 사전 패치(Data Prefetch) 등의
고성능 전략을 도입할 예정이야.
리서치 해볼 내용
- 빌드 도구에 의존하지 않고도 remote/shared 모듈을 동적으로 등록하고 로드해보기 → 등록 및 사용하면서 생기는 문제, shared설정 관련 문제 파악
- 공식 지원하는 rsPack 사용하여 빌드해보기
- 동적 모듈 타입 힌트를 사용하면서 생기는 이점 실제 프로젝트에서 확인
- 생성한 Manifest 파일 활용방안 연구
