vite + mf 적용하다가 알게된 것들

결론 : mf 할거면 번들러 웹팩 써

1. vite mf 플러긴의 한계

• @module-federation/vite 씀
• 내부적으로 top-level await 사용하도록 번들됨. 그런데 뭐가 문제냐면..
• top-level await 은 구형브라우저에서 돌아가지 않음
• top-level await 문법은 폴리필로 대체 불가능 함.
• 그럼 웹팩에서는 대응 가능한가? -> yes

module.exports = { plugins: [ new ModuleFederationPlugin({ // ... runtime: 'fetch', // or 'delegate' // async 코드를 좀 더 브라우저 친화적인 방식으로 변환 }) ] }

• 웹팩에서는 요런 설정 가능함...

2. vite에서 mf 는 어떻게 동작하는가

• MF가 생성하는 로더 코드가 메인 번들에 포함됨

const loadRemote = async () => { const module = await import('remote/component'); // 여기서 실제 원격 모듈 로드 }

• vite 의 빌드 프로세스는 아래와 같음

  1. 메인 애플리케이션 코드
  2. MF 초기화 코드 (여기에 top-level await 포함)
  3. legacy 플러그인이 모든 코드를 변환

• 즉, MF의 원격 모듈은 분리되어 있지만, MF를 초기화하고 관리하는 코드는 메인 번들에 포함된다. 이 초기화 코드에 top-level await가 포함되어 있어서 legacy 플러그인과 충돌이 발생함.