#Introduction

Module Federation is an architectural pattern for dividing JavaScript applications, allowing you to share code and resources among multiple JavaScript applications.

In this divided model, it can help improve application performance, enhance code maintainability, and more.

#Module Federation 2.0

Module Federation, a highlight feature introduced with Webpack 5, has been around for more than three years. This year, ByteDance, along with the author of Module Federation, @Zack Jackson, and community members jointly launched Module Federation 2.0.

Module Federation 2.0 is based on internal practices at ByteDance and the existing community ecosystem of Module Federation, addressing many issues in the previous version.

Within ByteDance, frameworks based on Modern.js have already deeply integrated with Module Federation 2.0. We are gradually integrating these features into Modern.js and hope to explore the future together with community developers.

#Modern.js MF Plugin

Based on internal practices at ByteDance, the Module Federation team officially provides the Modern.js Plugin to help developers use Module Federation more easily.

The plugin recognizes the current build engine (Webpack or Rspack), injects the corresponding Module Federation plugin into Modern.js applications, and automatically handles build configurations and adds runtime code.

Moreover, the plugin also supports the use of Module Federation in Modern.js SSR applications, providing a better performance experience.

For more details, refer to Using Module Federation and Module Federation Server-Side Rendering.

#Application-Level Modules

Application-level modules possess the application's framework rendering capabilities and routing capabilities, allowing them to operate like applications. Application-level modules are a crucial capability in micro-frontend frameworks, providing the ability to load and render across application frameworks (React, Vue) and supporting the loading of modules with routing.

Module Federation 2.0 offers the Bridge capability to load application-level modules.

Modern.js, based on Bridge and its internal implementation, provides APIs to easily export application-level modules. For more details, refer to Application-Level Modules.