Module Federation 2.0 개선점들

런타임 분리

(MF 생태계에서 런타임이란, 원격 모듈을 실제로 불러오고 실행하는 역할을 담당하는 코드를 의미함)

• 빌드 도구에서 런타임 분리

[웹팩] ──── 강하게 결합 ──── [런타임]
   └─ 빌드할 때 런타임 코드가 웹팩에 내장됨
   └─ 다른 빌드 도구 사용 어려움

• 이렇게 이전에는 웹팩에 런타임이 내장되어있었기 때문에, 빌드툴과 MF 코드가 강결합 되어있었음.
• 이를 분리하여 아래와 같은 형태를 띄게 됨.

[빌드 도구들]  ────  독립적  ──── [@module-federation/enhanced/runtime]
웹팩                                        └─ 모듈 로딩
Rspack                                      └─ 의존성 관리
기타 도구들                                  └─ 공유 모듈 처리

• 런타임이 독립적인 sdk 로 제공됨
• 따라서, 빌드툴에 따라서 가능여부가 정해지지 않음

// 이제는 런타임을 직접 제어할 수 있음
import { init, loadRemote } from '@module-federation/enhanced/runtime';

// 런타임 설정을 자유롭게 할 수 있음
init({
  name: '@demo/app-main',
  remotes: [
    // 웹팩으로 빌드된 모듈도 로드 가능
    {
      name: "@demo/app1",
      entry: "http://localhost:3005/mf-manifest.json",
    },
    // Rspack으로 빌드된 모듈도 로드 가능
    {
      name: "@demo/app2",
      entry: "http://localhost:3006/remoteEntry.js",
    },
  ],
});

• 위의 코드는 application 레이어의 entry 에 들어가는 코드로, 위와 같이 런타임 로드를 동적으루 할 수 있음! 즉 런타임 로드 자체가 빌드툴에 결합되어있는 것을 분리함!
  • 런타임에 불러올 모듈의 url 을 동적으로 결정 가능함
• 즉, sdk 로 요 부분을 분리하여 빌드툴과 MF 기능의 강결합을 제거함.

버전 관리 개선

• 다중 버전 지원
  • 같은 모듈의 여러 버전을 동시에 로드하고 사용 할 수 있다.
  • 충돌하는 버전이 있을 때, 사용할 버전을 지정하는 정책을 설정 할 수 있다.
• 따라서, 일부 앱은 react 19, 다른 앱은 17 사용 가능함 (mf version 1 에선 이게 안됐음.)
• 하위 호환성을 유지함.
  • 오래된 컴포넌트도 계속 사용 가능함
  • 새 버전으로의 마이그레이션을 천천히 진행 가능
• 레거시 코드를 유지하면서 새로운 기능 개발 가능
• 팀별로 다른 버전 사용 가능
• 점진적인 업그레이드 전략 수립 가능

타입스크립트 지원 강화

• 타입 정의 공유
  • 리모트 모듈의 타입 정의를 자동으로 공유하고 동기화 할 수 있음.
• 타입 안정성
  • 컴파일 시점에 리모트 모듈 사용의 타입 오류를 감지 할 수 있음.

버전 관리 개선

• 다중 버전 지원
  • 같은 모듈의 여러 버전을 동시에 로드하고 사용 할 수 있다.
  • 충돌하는 버전이 있을 때, 사용할 버전을 지정하는 정책을 설정 할 수 있다.

// webpack.config.js
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    'remote_v1': 'remote@http://localhost:3001/remoteEntry.js',
    'remote_v2': 'remote@http://localhost:3002/remoteEntry.js',
  },
})

import ComponentV1 from 'remote_v1/Component';
import ComponentV2 from 'remote_v2/Component';

const loadComponent = async (version) => {
  if (version === 'v1') {
    return import('remote_v1/Component');
  } else {
    return import('remote_v2/Component');
  }
};

// webpack.config.js
new ModuleFederationPlugin({
  // ...
  shared: {
    'some-library': {
      singleton: true,
      requiredVersion: '^2.0.0',
      strictVersion: true,
      versionCheck: (version) => {
        // 버전 충돌 시 사용할 로직
        return semver.satisfies(version, '^2.0.0');
      }
    }
  }
})

보안 강화

• 무결성 검증
  • 리모트 모듈의 해시를 검증하여, 변조가 되지 않았음을 확인한다.
• CSP(Content Security Policy) 통합
  • 리모트 모듈 로딩에 대한 보안 정책을 강화할 수 있다.

성능 최적화

• 프리페칭
  • 필요할 것으로 예상되는 모듈을 미리 로드하여, 성능 향상
• 스마트 캐싱
  • 브라우저 캐시와 메모리 캐시를 효율적으로 사용

플러그인 시스템 개선

• 모듈 로딩, 에러처리 등 다양한지점에 훅 추가 가능

컨테이너 간 통신 개선

• 이벤트 버스
  • 컨테이너 간 이벤트 기반 통신을 위한 내장 시스템 제공
• 상태 공유
  • Redux 혹은 MobX dh와 같은 상태관리 라이브러리와의 통합을 개선
  • 요건 공유의존성과 다른건가? 했는데, 여러 마이크로프론트엔드 간에 일관된 상태를 유지할 수 있는 중앙 집중식 저장소(store)를 제공한다. 즉, redux / mobx 랑 통합시키기 가능.
  • 즉, 공유의존성으로 redux 자체를 사용하는게 아니라 shared/store와 같은 커스텀 모듈을 만들고 그 모듈 내에서 마이크로프론트엔드 간에 상태 공유가 가능하도록 리덕스나 모백스를 확장한다.
  • 오..요건 정말 좋은듯

// store.js (shared module)
import { createStore } from 'redux';
const store = createStore(rootReducer);
export default store;

// In each Micro Frontend
import store from 'shared/store';

• 이런식인거고

// Using a custom event bus
const eventBus = new EventEmitter();
eventBus.on('stateChange', (newState) => {
  // Update local state
});

// When state changes
eventBus.emit('stateChange', newState);

• 리덕스에서 통합할 때는 아래와 같음.

// store.js (shared module)
import { createStore, combineReducers } from 'redux';

const createRootReducer = (asyncReducers) => combineReducers({
  ...asyncReducers,
  // other shared reducers
});

export default function configureStore(initialState = {}) {
  const store = createStore(createRootReducer());
  store.asyncReducers = {};
  return store;
}

export function injectReducer(store, key, reducer) {
  store.asyncReducers[key] = reducer;
  store.replaceReducer(createRootReducer(store.asyncReducers));
}

// In each Micro Frontend
import configureStore, { injectReducer } from 'shared/store';
import myReducer from './reducer';

const store = configureStore();
injectReducer(store, 'myFeature', myReducer);

• 이렇게함으로써 상태관리를 각 앱으로부터 격리시키되, 상태관리를 독립된 모듈로서만 공유하는거군.

마이크로프론트엔드 지원 강화

• 라우팅 통합
  • 여러 마이크로프론트엔드 간의 라우팅을 더 수비게 관리 가능.
• 스타일 격리
  • CSS-in-JS 솔류션과의 통합을 개선하여, 스타일 충돌 방지

배포 플랫폼 지원

• mf-manifest.json 파일 프로토콜 도입
• 버전 리소스와 버전 관리 개선