Solving Micro-Frontend Bloat with Webpack Module Federation
Learn how to eliminate duplicate dependencies in micro-frontends using Webpack Module Federation to share code at runtime without sacrificing independent deployment.
Loading…
webpackReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Learn how to eliminate duplicate dependencies in micro-frontends using Webpack Module Federation to share code at runtime without sacrificing independent deployment.
In Webpack 5 Module Federation, the share configuration can combine singleton:true with strictVersion:true to enforce a single version of a dependency that must exactly match a specified range. When multiple remote applications declare overlapping but different version ranges for the same shared module, the runtime’s algorithm for picking the winning version
Webpack 5 introduces Module Federation to enable runtime code sharing between independent builds. A critical aspect of this architecture is the shared configuration, which prevents redundant library loading by negotiating versions between the host and remote containers. When a library is marked as a singleton , Webpack ensures only one instance of that depen
Symptom When multiple federated applications declare different versions of the same shared library with singleton: true , webpack 5 loads only the first encountered version and drops subsequent versions without any warning, error, or configurable fallback. Context The Module Federation shared configuration allows marking a module as a singleton to guarantee
javascript