Module Federation allows for the specification of shared modules and dependency deduplication across micro frontends. With version 2.0, it has evolved to function independently of webpack. This update introduces key features, including a federation run time, a new plugin API and support for popular frameworks like React and Angular as well as popular bundlers like Rspack and Vite. By adopting Module Federation, large web applications can be divided into smaller, manageable micro frontends, allowing different teams to develop, deploy and scale independently while sharing dependencies and components efficiently.
The release of the Webpack 5 Module Federation feature has been highly anticipated by developers of micro frontend architectures. The feature introduces a more standardized way to optimize how module dependencies and shared code are managed and loaded. Module federation allows for the specification of shared modules, which helps with the deduplication of dependencies across micro frontends by loading code used by multiple modules only once. It also lets you distinguish between local and remote modules, where the remote modules are not actually part of the build itself but loaded asynchronously. Compared to build-time dependencies like npm packages, this can significantly simplify the deployment of a module update with many downstream dependencies. Be aware, though, that this requires you to bundle all of your micro frontends with Webpack, as opposed to approaches such as import maps, which might eventually become part of the W3C standard.
