How Module Federation Is Changing Frontend Bundling and Micro‑Frontend Architecture

WHAT: What is Module Federation?

Module Federation enables a JavaScript application to dynamically load code from another bundle at runtime, either on the client or server. The key points are dynamic loading (on‑demand and runtime) and the ability to import another bundle’s code at the application level.

Dynamic has two meanings:

On‑demand: a package can be split and only a part is loaded.

Runtime: execution happens in the browser rather than during Node compilation.

Another bundle’s code : previously sharing was done at file or npm‑package level; now members can be exported at the application level.

Related concepts: Remote – a Webpack build consumed by a host; Host – a Webpack build that consumes remotes. An application can be a host, a remote, or both.

HOW: How does it work?

The mechanism is driven by the ModuleFederationPlugin. A typical configuration looks like:

new ModuleFederationPlugin({
  name: "app-1",
  library: { type: "var", name: "app_1" },
  filename: "remoteEntry.js",
  remotes: {
    app_02: "app_02",
    app_03: "app_03",
  },
  exposes: {
    antd: "./src/antd",
    button: "./src/button",
  },
  shared: ["react", "react-dom"],
});

Configuration properties:

name (required): unique ID used as ${name}/${expose} when consuming.

library (required): defines the UMD name.

remotes (optional): bundles that the host will consume.

exposes (optional): modules that the remote makes available.

shared (optional): prefers host’s dependencies; falls back to the remote’s own.

Typical build outputs are main.js, remoteEntry.js, and a set of async chunks.

A consumes B

Host A can load a module from remote B at runtime:

const React = await import('B/react');

Remote B provides a get method that returns a promise resolving to the requested module, using a mapping of external names to module IDs. The host first checks any overrides supplied by the remote, then falls back to its own bundle.

WHY: Application scenarios

Module Federation is especially useful for micro‑frontend architectures, allowing shared dependencies, runtime component sharing, and independent deployment of sub‑applications. It also speeds up compilation by externalizing node_modules and loading them at runtime, reducing build times from over 100 seconds to a few seconds.

Other scenarios include reducing bundle size, avoiding duplicate libraries, and enabling flexible sharing of components, pages, or whole applications.

References

https://richlab.design/translations/2020/03/27/webpack-5-module-federation/

https://dev.to/marais/webpack-5-and-module-federation-4j1i

https://github.com/Paciolan/remote-component

https://federated-libraries.now.sh/

https://github.com/jacob-ebey/federated-libraries-get-started