Module Federation is a technique for improving the modularity and performance of large-scale web applications. It allows different parts of the application, known as modules, to be loaded on demand, rather than all at once at the start of the application. This can significantly reduce the initial load time of the app and improve the user experience.
By Leonardo Rosseti
Senior frontend developer
13 December 2022
Benefits of using Module Federation
Module Federation allows different parts of the app to be built and deployed independently, which allows teams to work on different modules concurrently without affecting the rest of the app. It also allows for easier testing and debugging of individual modules, as they can be isolated and tested in isolation.
What is Webpack
Module Federation is used with Webpack, which is a popular module bundler for JavaScript applications. Webpack allows you to bundle and load several modules on demand.
Let's see an example
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
// ... other webpack configuration options
plugins: [
new ModuleFederationPlugin({
name: "my-federation",
library: { type: "var", name: "myFederation" },
filename: "my-federation.js",
exposes: {
"./componentA": "./src/components/componentA",
"./componentB": "./src/components/componentB"
},
shared: ["react"]
})
]
};
The code above uses the ModuleFederationPlugin to enable module federation in a Webpack project. The plugin takes several options that define the behavior of the federation.
The name option specifies the name of the federation. This is used to identify the federation when it is loaded by other applications.
The library option specifies the type of the exposed library and its name. In this example, the library is exposed as a global variable with the name myFederation.
The filename option specifies the name of the generated bundle file that contains the federation.
The exposes option is a mapping of modules to be exposed by the federation. In this example, the modules ./componentA and ./componentB will be exposed by the federation.
The shared option specifies a list of modules that should be shared between the federation and other applications. In this example, the react library is shared between the federation and other applications.
When the webpack configuration is run, the plugin will generate a bundle file (specified by the filename option) that contains the federation. This bundle can then be loaded by other applications, allowing them to access the exposed modules and shared modules.
Share
About Author
Leonardo Rosseti
Senior frontend developer
Leonardo Rosseti is a senior frontend developer with a strong passion for coding and music. When he is not coding you can find him playing 90's dance music in front of the loudest and craziest crowds.
Newsletter
Get periodic updates, the best insights and some precious tips.
Language
Italiano
English
Copyright © 2022 · Privacy policy · Cookie preferences
P.iva 06304560482