Micro Frontend를 구현하기 위한 방식에는 여러 종류가 있다.
- 서버 측 템플릿 구성
- 빌드 타임 통합
- iframe을 통한 런타임 통합
- Javascript를 통한 런타임 통합
- Web Component를 통한 런타임 통합
그 중에서 Module Federation은 다른 Application의 코드를 런타임에 가져와서 동적 로드하는 Javascript를 통한 런타임 통합 방식이다.
런타임에 통합하는 이유
빌드 타임에서 통합하면 특정 모듈이 수정될 때 해당 모듈을 사용하는 다른 모듈도 다시 빌드/배포 해야하기 때문에 독립적인 배포가 어려워집니다.
런타임에서 통합하면 특정 모듈이 업데이트 되면 해당 모듈을 사용하는 다른 모듈을 배포 안해도 변경사항이 실시간으로 반영됩니다.
Module Federation 용어 정리
Chunk: 어플리케이션의 Javascript 코드를 여러 개로 분할한 것remoteEntry.js: Container을 가진 어플리케이션을 초기화하는 청크, 특정 어플리케이션의 청크로 해당 처리를 함.Host: 모듈들을 하나로 통합한 공간Local Module: 단일 Webpack 빌드에 포함되는 모듈, 로컬 모듈은 단일 빌드 안에서만 로딩할 수 있다.Remote Module: 다른 Webpack 빌드에서 만든 모듈을 대상으로 런타임에 로딩할 수 있는 모듈, 각 빌드는 개별 서버에 배포 가능하며 런타임에 Dynamic Imports 하듯이 원격 모듈을 로딩할 수 있다.Container: 각각의 빌드, 하나의 빌드가 하나의 웹 어플리케이션을 나타낸다.Expose: 컨테이너가 외부에 노출한 원격 모듈의 목록을 나타내는 설정
Module Federation 동작 원리
-
Remote App을 빌드하면
remoteEntry.js라는 파일이 생성되며 Expose한 Remote Module을 Host App에서 로딩할 수 있도록 정의한다. -
Host App의 번들 파일을 확인하면 Remote App의 모듈의 로딩 방법을 확인할 수 있다.
-
Remote App의 Remote Module 맵 설정
-
Remote Module 로딩
Module Federation의 단점
- Host간 Remote 의존성
new ModuleFederationPlugin({
name: "host",
filename: "remoteEntry.js",
remotes: {
remote: "remote@http://localhost:3002/remoteEntry.js",
},
exposes: {
"./App": "./src/App.tsx",
},
shared: {
react: {
singleton: true,
version: "18.2.0",
},
"react-dom":{
singleton: true,
version: "18.2.0",
}
}
})원격 모듈은 빌드 설정에서 필수적으로 등록을 해야하는데, 이는 런타임 과정에서 해당 Remote를 삭제, 수정, 추가가 불가능하게 한다.
- 불안정한 타입스크립트 지원
Module의 타입 서포트가 되지 않기 때문에 직접 외부 플러그인을 사용해서 타입 서포트를 해줘야 한다. 빌드 타임에 설정을 해서 넣어줘야 하는 데 이 부분은 Module이 언제든 Host가 되고 Remote가 될 수 있는 MF의 철학에서 벗어난다.
- 로컬에서 Host 연동 테스트 어려움
Host와 Remote는 다른 프로젝트이기 때문에 테스트를 위해서는 두 개의 개발 서버를 띄워야 한다는 단점이 있다.
remoteEntry.js파일 형식 문제
프로젝트 크기가 커질수록 파일의 코드 길이가 늘어남 (5000줄 이상이 될 수 있음)
Module Federation 2.0의 등장
위의 기능 설명들은 Module Federation 1.0의 기능들이다.
Module Federation 1.0은 Webpack에 강한 의존성을 가지고 있었다. 2.0 버젼으로 업데이트 되면서 여러 단점들을 보완시켰다.
- Federation Runtime
- Webpack의 강한 의존성을 해결하기 위해 Federation Runtime API가 생겼다.
- Federation Runtime API를 사용해서 Webpack 말고도 다양한 Bundler에서 사용 가능해짐-
Manifest Protocol
- 기존의
remoteEntry.js에서mf-manifest.json을 사용가능하게 변경 - Json 형태의 선언적 표현, 코드 내용 미포함, 다양한 곳에서 호출 가능
- 기존의
-
Type Hint
- Dynamic Module Type Hint
동적으로 로드되는 모듈의 타입에 대한 힌트를 얻을 수 있다.
결론
Module Federation 2.0의 탄생으로 많은 기능들이 추가가 되면서 좀 더 쉬운 개념을 가지게 되었지만 아직 많은 단점들이 존재한다고 한다. 우아콘 내용에 따르면 그런 단점들까지 우아한 형제들에서 라이브러리를 만들어서 처리해내고 있다고 한다..
참조
kakao FE 기술 블로그 - https://fe-developers.kakaoent.com/2022/220623-webpack-module-federation/
우아콘 Module Federation - https://www.youtube.com/watch?v=QCrfQhRguss&t=882s
