In-depth guide on Webpack 5 module federation for micro frontends
Webpack is a well-established static module bundler for modern JavaScript applications. It has more than 57k stars on GitHub and over 13 million weekly downloads from npm registry. It released version 5 on October 10, 2020, which brings a number of changes:
- Improved build performance with Persistent Caching.
- Improved Long-Term Caching with better algorithms and defaults.
- Improved bundle size with better Tree Shaking and Code Generation.
Most importantly, Webpack 5 has a new feature, Module Federation, which allows multiple webpack builds to work together. One application can dynamically run code from another bundle or build, on the client and the server. This is the foundation of micro frontends.
Each webpack build can be a host, which is a container to load other builds. It can also serve as a remote, which is a micro frontend to be loaded. Each application can be a remote and a host that is consumable and consumer of any other federated modules in the system. Bidirectional-hosts, and even omnidirectional-hosts, can be set up easily with webpack configurations.
In addition, module federation does not need to load the main entry point or another entire application. It only needs to load the needed code, i.e. a few kilobytes of code. This approach works with any JavaScript code without redundant packages for shared utilities and components.
#javascript #angular #nodejs #react #webpack
