TL;DR: Building complex web apps and want to break down development into manageable chunks? Webpack Module Federation in Webpack 5 offers a revolutionary approach to code sharing. It simplifies micro-frontend development by enabling dynamic code loading between applications, reducing duplication and boosting performance.
Module Federation is one of the most exciting features in Webpack 5 and is considered a game-changer in JavaScript architecture. It supports more independent and straightforward code sharing at runtime among JavaScript applications, making the applications more adaptive and dynamic.
This article will go through what Webpack Module Federation is, how and why it is used, and the benefits you can reap by using it.
Webpack Module Federation makes sharing code and dependencies between different code bases easier. This architecture loads the code dynamically at runtime to reduce the frequency of code duplication, and the host application only downloads the missing dependencies, if any.
Zack Jackson, a Webpack maintainer, invented Module Federation, which became a flagship feature of Webpack 5 in 2020. It is not a framework but a plugin that provides flexibility in building your project. Even though Module Federation was initially for the asynchronous loading of JavaScript bundles, later on, it expanded to aid with server-side rendering.
Webpack Module Federation is a powerful feature revolutionizing JavaScript architecture and the micro-frontend approach. It can provide many benefits to your application system if appropriately utilized.
Before the introduction of Module Federation, code sharing tended not to be a smooth process. Micro-frontend implementation was also getting more complex.
Module Federation is an architecture that addresses these issues and revolutionized the micro-frontend strategy. With Module Federation, an application runs code dynamically from another bundle or build with its code-sharing and functionality-consuming abilities during runtime, paving the path to the successful utilization of micro-frontend technology. In addition, the use of sharable dependencies improves the compactness of the application. Module Federation gives a sense of familiarity to developers, too, as it is a part of the Webpack ecosystem the developers may have already used.
All these criteria make Webpack Module Federation a powerful and essential feature you must consider using in future projects.
Following are some important terms you may need to familiarize yourself with when using Webpack Module Federation:
plugins: [
new container.ModuleFederationPlugin({
remotes: {
app_two: 'app_two',
}
})
] A build can both consume modules from other builds and provide modules to other builds at runtime, thanks to the ModuleFederationPlugin. You need to be familiar with several key configuration options, as Module Federation is configuration-based:
plugins: [
new container.ModuleFederationPlugin({
name: 'she1',
})
]
}; plugins: [
new container.ModuleFederationPlugin({
filename: 'she1/remoteShop.js'
})
] In addition to the previous configuration options, there are several more that you may come across, like singleton, strictVersion, and eager.
The ModuleFederationPlugin facilitates applications exposing and consuming modules to enable the Module Federation implementation.
Following is a sample code block showing an application that exposes its AppContainer and hosts react and react-dom. Because of the shared modules, the remotes will only download the required application code and none from the shared modules.
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
new ModuleFederationPlugin({
name: 'appli_one',
library: { type: 'global', name: 'appli_a' },
remotes: {
app_three: 'app_three',
app_two: 'app_two'
},
exposes: {
AppContainer: './src/App'
},
shared: ['react', 'react-dom']
}), You can find more information and examples for implementing Module Federation with React, Vue, and Angular here.
Webpack Module Federation is a feature that enables loading separately compiled applications at runtime and allows sharing of common dependencies. With its wide array of benefits and runtime integration ability, Module Federation is a great feature for micro-frontends and plugin systems.
It is a highly beneficial solution to consider in your project, especially with its scalability in sharing code among independent applications, which is bound to improve the overall performance.
I hope this article helped you understand Webpack Module Federation and how to utilize it effectively in your project.
Thank you for reading!
Syncfusion’s Essential JS 2 is the only suite you will ever need to build an app. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Download a free trial to evaluate the controls today.
If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!