모듈 페더레이션

모듈 페더레이션 (Module Federation)

여러 개의 분리된 빌드가 하나의 애플리케이션을 이뤄야 하는 경우가 있어요. 각 빌드는 컨테이너처럼 동작하면서 서로 코드를 노출(expose)하고 소비(consume)할 수 있고, 그렇게 만들어지는 통합된 애플리케이션을 구성할 수 있어요. 이 기법은 흔히 마이크로 프런트엔드(Micro-Frontends)라고 불리지만, 그 용도에 국한되지는 않아요.

출처: Webpack — Module Federation

로우 레벨 개념

**로컬 모듈(local modules)**은 현재 빌드의 일부인 일반 모듈이고, **원격 모듈(remote modules)**은 현재 빌드에 속하지 않고 런타임에 원격 컨테이너에서 로드되는 모듈이에요.

원격 모듈을 로드하는 것은 비동기 작업으로 간주돼요. 원격 모듈을 쓸 때 이 비동기 작업은 원격 모듈과 엔트리포인트 사이에 위치한 다음 청크 로딩 연산에 들어가요. 청크 로딩 연산은 보통 import() 호출이지만, require.ensure이나 require([...]) 같은 옛 구조도 지원돼요.

컨테이너는 컨테이너 엔트리를 통해 만들어지며, 특정 모듈에 대한 비동기 접근을 노출해요. 그 접근은 두 단계로 나뉘어요.

모듈 로딩(비동기)
모듈 평가(동기)

1단계는 청크 로딩 중에, 2단계는 다른 로컬/원격 모듈과 섞여 모듈 평가 중에 수행돼요. 덕분에 모듈을 로컬에서 원격으로(또는 반대로) 바꿔도 평가 순서는 영향을 받지 않아요.

컨테이너는 중첩될 수 있어요. 컨테이너가 다른 컨테이너의 모듈을 쓰는 것도 가능하고, 컨테이너 간 순환 의존성도 만들 수 있어요.

하이 레벨 개념

각 빌드는 컨테이너로 동작하면서 동시에 다른 빌드를 컨테이너로 소비해요. 그래서 각 빌드는 컨테이너에서 모듈을 로드해 다른 빌드가 노출한 어떤 모듈이든 접근할 수 있어요.

**공유 모듈(shared modules)**은 중첩된 컨테이너에 대한 오버라이드로 제공되면서 동시에 오버라이드될 수 있는 모듈이에요. 보통 각 빌드에서 같은 모듈(예: 같은 라이브러리)을 가리켜요.

packageName 옵션으로 requiredVersion을 찾을 패키지 이름을 정할 수 있어요. 기본적으로 모듈 요청에서 자동으로 유추되며, 자동 유추를 끄려면 requiredVersion을 false로 설정해요.

구성 요소

ContainerPlugin(로우 레벨) — 지정한 노출 모듈을 가진 추가 컨테이너 엔트리를 생성해요.
ContainerReferencePlugin(로우 레벨) — 컨테이너에 대한 특정 참조를 externals로 추가하고, 이 컨테이너들에서 원격 모듈을 import할 수 있게 해 줘요. 컨테이너의 override API도 호출해요.

모듈 페더레이션