Module Federation provides a solution to the scaling problem by allowing a SPA to be sliced into multiple smaller remote applications that are built independently. It has become more popular in recent years since the addition of the ModuleFederationPlugin in Webpack.
// webpack.config.js for a remote app
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/Button',
},
shared: ['react', 'react-dom'],
}),
],
};
// webpack.config.js for a host app
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
},
shared: ['react', 'react-dom'],
}),
],
};
Module Federation introduces three terms for the applications that make up the Module Federation architecture: host, remote and federated modules.