Module Federation: Theory vs Practice
summary
A team moved a 10+ site monolith to micro-frontends and used Webpack Module Federation to share a design-system package and other code without republishing each app. The setup used the webpack core plugin to create a remote manifest and lazy-loaded remotes, enforced React as a singleton to prevent dual-React crashes, and wrapped federated imports in an error boundary. Module Federation enabled very fast setup and live updates across apps but did not provide runtime isolation, so breaking changes and versioning still had to be managed manually.
AI-written summary · about
chapters (10)
- 0:00Modular apps intro
- 4:20Monolith frontend problems
- 7:54Micro frontend definition
- 9:20Module Federation solution
- 13:00Federation principles
- 16:33Compatibility with bundlers
- 17:18Design system use case
- 20:36Implementation challenges
- 22:27Federation limits
- 24:57Q&A
related talks
29mHow module federstion makes our life easier
31mModule Federation in Webpack 5
01h 02mWebpack 5 Module Federation
55mModule Federation in 2024: Beyond Webpack
51mBuilding a Micro-Frontend Application with Webpack 5 Module Federation
01h 13mThe Microfrontend Revolution, module federation, Webpack 5
22mRoad to Module Federation
44mApplications instead of libraries: Micro frontends implemented through module federation