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.

What Is Module Federation?

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.

Why Is Webpack Module Federation Important?

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.

Module Federation: Terminology

Following are some important terms you may need to familiarize yourself with when using Webpack Module Federation:

Host : The Webpack build initialized first during a page build is the host. The host application contains typical features from a SPA or SSR application that boots and renders the components the user would see first.
Remote : Remote is another Webpack build from which the host can consume a part. It can strictly be either a remote or a host. The major functionality of a remote is to expose modules to be consumed.

plugins: [
  new container.ModuleFederationPlugin({
   remotes: {
        app_two: 'app_two',
        }
  })
]

Bidirectional host : Bidirectional hosts can consume other applications or be consumed. So, this Webpack build or bundle can act as either a remote or a host at runtime.
Vendor Federation : Vendor Federation is an important feature that aids in solving a significant performance issue in micro-frontend architecture. Regardless of where the modules are loaded from, it enables all or part of a remote or host’s npm modules to share at runtime declaratively.

Configuration Options

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:

library : The library contains a name (name of the library) and type options. It helps decide how the exposed code is retrieved and stored.
name : The name configuration option uniquely identifies the exposed container.

plugins: [
    new container.ModuleFederationPlugin({
      name: 'she1',
    })
  ]
};

filename : This determines the filename of the output bundle in Module Federation.

plugins: [
  new container.ModuleFederationPlugin({
    filename: 'she1/remoteShop.js'
  })
]

exposes : Through Module Federation, you can also share file types in addition to the modules. This configuration option depicts the path to the files or modules exposed by the container.
shared : This is an essential configuration option, allowing you to share libraries on which the exposed module depends to run.

In addition to the previous configuration options, there are several more that you may come across, like singleton, strictVersion, and eager.

How Does Module Federation Work?

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.

Benefits of Webpack Module Federation

Using the shared option minimizes dependency duplication , as the remotes depend on the host’s dependencies. If the host lacks a dependency, the remote downloads its dependency only when necessary.
Server-side rendering is possible , as Module Federation can work in any environment.
Enhances build performance , as Module Federation supports the micro-frontend approach, allowing different teams to work simultaneously on a larger application by building and deploying independent, split projects.
Module Federation supports lazy loading bundles to load modules only when necessary, resulting in better web performance.
Module Federation manages a dependency graph for shared dependencies. It helps download necessary dependencies even when there is an issue like a network failure.
Improves both user experience and developer experience.

Conclusion

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!

What Is Webpack Module Federation and Why Does It Matter?