💁‍♂️ 본글은 webpack 공식문서와 (2021)FECoNF - 임지훈님의 강연을 참고하여 작성되었습니다
모든 사진의 출처는 webpack 공식문서와 임지훈님 강연입니다

• webpack[Modul Federation]: https://www.apollographql.com/docs/react/data/queries
• Webpack 5 Module Federation으로 Micro-Frontends 운영하기(임지훈): https://www.youtube.com/watch?v=0Eq6evGKJ68&t=1164s

Modul Federation?

특징

SPA 와 비교

- SPA : 라우트 기반으로 번들을 불러와서 렌더링 기껏해봐야 컴포넌트만 공유

- Modul Federation : 1.비즈니스 로직 2. 상태 3.Json 4.Style 모두 공유가 가능하다

즉

다른 어플리케이션에 있는 코드가 업데이트되면

배포없이 이어플리케이션에 실시간으로 반영됨

코드

App 은 Header 를 렌더링 하고있다

최종적으로 이앱에서 Header.js 를 모듈로서 expose 할것이다.

Modul Federation 을 사용하기위해 Modul Federation 플러그인을 사용한다

이 expose 에서 정의된 파일은 모두 외부에서 사용될수있다

deps 라는 객체를 구조분해 할당 하고있다

deps 는 package.json 에있는 dependencies에 정의된 의존성패키지들을 모두 공유받겠다는 의미

Header 앱이 3002 포트에 열렸다고 가정해보자

노출한 모듈을 소비하기위해 리모트 설정이 있다

앱 실행

Frame 은 localhost:3000 에서 열린다고 가정

remoteEntry.js 가 정상적으로 받아와졌음

Header 의 vendor 도 함께 공유받아서 사용됨

Frame 앱에서 remote 앱인 Header 앱에 vendor를 받아서 사용하고 있다

심화

remoteEntry ??

Frame 앱에서 window.header로 접근하면 우리가 정의해 두었던 header라는 이름의 앱에 대한 Module Federation 정보가 들어있다.

Header 의 get 메서드를 통해 모듈에 접근할수있다

아래와 같이 Header 앱에서 expose 했던 Header 라는 이름의 모듈을 불러와 보자

Promise 로 Header 라는 이름의 모듈을 생성하는 팩토리 함수가 결과 값으로 온다

의존성 패키지 공유

의미: Modul Federation 앱들이 각각 같은 패키지를 사용하고 있을때 동일한 패키지 번들(vendor)을 여러 번 받을 필요가 없어진다는것