• English

      • Glossary of Terms

      Module Federation

      Module Federation (MF) is an architectural pattern for partitioning JavaScript applications, similar to microservices on the server side. It allows you to share code and resources between multiple JavaScript applications (or micro frontends). If an application using federated modules lacks the dependencies required by the federated code, the missing dependencies will be downloaded from the build source or a peer that is able to share it.

      This enables the creation of micro-frontend style applications where multiple systems can share code and update dynamically without the need to rebuild the entire application.

      This also enabled a wider set of use cases on the server side, as federation operates universally, it has several dynamic backend use cases.

      Producer (Remote)

      An application that exposes other modules to be consumed by other JavaScript applications through the Module Federation build plugin with the exposes configuration is referred to as a Provider (Producer) in Module Federation. A Producer can also act as a Consumer.

      Consumer (Host)

      An application that consumes modules from other Producers through the Module Federation build plugin with the remotes configuration is referred to as a Consumer (Consumer). A Consumer can also act as a Producer.

      Micro-frontend

      Micro-frontend (MFE) is an architectural style similar to microservices, where a cohesive single product is composed of multiple independently delivered frontend applications. It breaks down a frontend application into smaller, simpler applications that can be independently developed, tested, and deployed, while still appearing as a single product to the user.

      It primarily addresses two issues:

      • The increasing size and maintenance difficulty of applications as they evolve through iterations.
      • The low efficiency of cross-team or cross-department collaboration in project development.

      Bundler

      Refers to module bundling tools such as Webpack, Rspack, Vite, and Metro.

      The main goal of a bundler is to package JavaScript, CSS, and other files together. The packaged files can be used in browsers, Node.js, and other environments. When a Bundler processes a web application, it constructs a dependency graph that includes all the modules required by the application and then packages all modules into one or more bundles.

      To choose the right tool and plugin for your project, see Integrations.

      Manifest

      Manifest is a runtime manifest generated by a producer during build. It describes the remote entry, exposed modules, assets, shared dependencies, and type information. A consumer can read mf-manifest.json and use that information to load remote modules.

      For more details, see Manifest and Snapshot, manifest configuration, and mf-manifest.json fields.

      Snapshot

      Snapshot is a condensed and pre-resolved result of Manifest information. The runtime can generate a Snapshot from Manifest. If you have a deployment service, it can also generate and deliver Snapshot ahead of time so the consumer can get the remote entry and preloadable assets directly.

      Snapshot is used by remote loading, asset preloading, DevTools, proxying, and runtime diagnostics.