webpack module federation
여러 개의 개별 빌드가 단일 어플리케이션을 형성할 수 있도록 해주는 webpack의 기능이다. 개별 빌드는 컨테이너처럼 작동하며, 빌드 간에 코드를 노출하고 소비하여 단일 통합 애플리케이션을 생성할 수 있다.
Low-Level concepts
로컬 모듈과 원격 모듈을 구별한다.
- 로컬모듈 : 현재 빌드의 일부인 일반 모듈
- 원격모듈 : 현재 빌드의 일부가 아니며, 원격 컨테이너에서 런타임에 로드되는 모듈
원격 모듈을 로드하는 것은 비동기 작업으로 간주된다. 원격 모듈을 사용할 때 이러한 비동기 작업은 원격 모듈과 엔트리포인트 사이에 있는 다음 청크 로드 작업에 배치된다. 청크 로드 작업 없이는 원격 모듈을 사용할 수 없다.
청크 로드작업은 일반적으로 import()를 사용하며, require.ensure 또는 require([...]) 같은 이전 구조도 지원한다.
특정 모듈에 대한 비동기 접근을 노출하는 컨테이너 엔트리를 통해 컨테이너가 생성된다. 노출된 접근은 두 단계로 구분된다.
- module load (비동기)
- module validation (동기)
1단계는 청크 로드 중에 수행된다. 2단계는 다른 로컬 및 원격 모듈과 interleave된 module validation 중에 수행된다. 이렇게 하면 모듈을 로컬에서 원격으로, 또는 그 반대로 변환해도 평가 순서가 영향을 받지 않는다.
컨테이너를 중첩할 수도 있다. 컨테이너가 다른 컨테이너의 모듈을 사용하거나, 컨테이너 간의 순환 의존성도 가능하다.
Use cases
페이지마다 빌드 분리
SPA에서 각 페이지를 서로 다른 빌드에서 컨테이너 빌드로부터 노출된다. 또한 애플리케이션 쉘은 모든 페이지를 원격 모듈로 참조하는 별도의 빌드이다. 이렇게 하면 각 페이지를 별도로 배포할 수 있다.
공통 컴포넌트 라이브러리
공통 컴포넌트를 별도의 빌드로 분리하여, 다른 애플리케이션들에서 그 컴포넌트를 불러와 사용할 수 있다. 그 컴포넌트에 변경점이 생기면 그 컴포넌트만 다시 빌드하여 배포하면 된다.
출처
- webpack module federation : https://webpack.kr/concepts/module-federation/