Module Federation의 Shared 의존성 관리

Module Federation(이하 MF)을 도입할 때 가장 먼저 마주하는 벽은 의존성(Dependency) 관리 입니다.

Host와 Remote가 서로 다른 버전의 라이브러리를 사용하고 있다면 MF는 어떤 결정을 내릴까요? "React 18.3.1(Host) 위에 React 18.2.0(Remote)을 띄우는 상황" 을 가정하고 시뮬레이션을 돌려봅시다.

1. Singleton: true 가 의미하는 바

package.json이나 webpack.config.js에서 singleton: true를 설정한다는 것은 다음과 같은 강력한 선언입니다.

"이 라이브러리는 브라우저 탭 전체에서 **딱 하나(Single Instance)**만 존재해야 해!"

React는 내부적으로 전역 상태나 Hooks 로직을 관리합니다. 만약 한 페이지에 두 개의 React 인스턴스가 로드되면 다음과 같은 치명적인 문제가 발생합니다.

2. 의존성 해결 알고리즘 (Resolution)

singleton: true가 설정되어 있을 때, MF는 "새로운 의존성 다운로드"를 극도로 꺼리는 모드로 진입합니다.

Host(18.3.1)가 이미 로드된 상태에서 Remote(18.2.0)가 진입할 때의 판단 로직은 다음과 같습니다.

3. 예외 상황: "나는 따로 쓸래" (Singleton: false)

만약 Host는 "하나만 쓰자(true)"고 하는데, Remote가 "나는 내 거 따로 쓸래(false)"라고 설정하면 어떻게 될까요?

동작 메커니즘

1. Host 초기화: singleton: true 선언. "웬만하면 내 거 써라."
2. Remote 초기화: singleton: false 선언.
3. 판단: MF는 Remote의 의사를 존중하여, 호환되는 버전이 있더라도 Remote용 React 18.2.0을 별도로 다운로드하여 실행합니다. (물론 React 같은 라이브러리는 이렇게 하면 에러가 나겠지만, lodash 같은 유틸리티는 가능합니다.)

4. shared에 명시하지 않는다면?

webpack.config.js의 shared 옵션에 라이브러리를 아예 적지 않는 경우는 어떨까요? 이는 MF의 버전 관리 및 공유 기능을 사용하지 않겠다는 의미입니다.

// webpack.config.js
new ModuleFederationPlugin({
  name: 'app1',
  // shared에 lodash를 넣지 않음
  shared: { 
    react: { singleton: true }, 
    // lodash 생략 
  },
});

중복 로드는 무조건 나쁠까?

반드시 그렇지는 않습니다. "격리" 와 "최적화" 관점에서 장단점이 있습니다.