Webpack Module Federation 도입 전에 알아야 할 것들

간단 소개

Webpack Module Federation의 개념, 동작 원리, 장점 및 한계를 분석하고 도입 전 고려사항을 제시합니다.

AI Summary

Module Federation 소개
- Webpack5의 Module Federation 기능은 여러 애플리케이션을 런타임에 통합하여 하나의 애플리케이션처럼 동작하게 함.
- 마이크로 프런트엔드의 빌드타임 통합 방식의 한계를 극복하고 런타임 통합을 가능하게 함.
Module Federation 동작 원리
- 호스트 앱은 리모트 앱의 remoteEntry.js 파일을 로딩하여 원격 모듈의 인터페이스를 정의하고 사용.
- 컨테이너는 각각의 빌드를 의미하며, Expose는 컨테이너가 외부에 노출한 원격 모듈 목록을 나타냄.
- 공유 모듈은 여러 컨테이너에서 같이 사용하는 모듈로, 런타임에 한 번만 로딩되어 효율성을 높임.
Module Federation의 장점 및 한계
- 빌드/배포 시간 단축, 영향 범위 축소, 빠른 로딩 속도 등의 장점이 있음.
- 원격 모듈의 타입을 알기 어렵고, 배포 시 remoteEntry.js 경로를 환경에 맞게 설정해야 하는 불편함이 존재.