logologo
Guide
Practice
Configuration
Plugins
Showcase
Blog
Ecosystem
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
Guide
Practice
Configuration
Plugins
Showcase
Blog
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
logologo
Overview

Bridge

Bridge Overview

React Bridge

Getting Started
Export Application
Load Remote Application
Load Remote Component
Vue Bridge

Frameworks

Framework Overview

React

Basic CRA with Rsbuild
Using Nx CLI for React
Internationalization (i18n)

Modern.js

Quick Start
Dynamic load provider

Next.js

Basic Example
Importing Components
Routing & Importing Pages
Working with Express.js
Presets

Angular

Angular CLI Setup
Using Nx CLI for Angular
Micro-frontends with Angular
Server-Side Rendering
Using Service Workers
Authentication with Auth0
Authentication with Okta
Splitting a Monolith
Extending a Monolith
Edit this page on GitHub
Next PageBridge Overview

#Overview

Module Federation, as a module sharing solution, aims to solve code reuse issues, optimize the build process, and enhance runtime performance. However, in practical project development, these functionalities alone are insufficient. It often needs to be combined with various frameworks to understand how to use Module Federation under different frameworks and how to integrate multiple functionalities from different frameworks. Additionally, it is necessary to consider the differing needs of various application scenarios, such as backend applications versus mobile application development scenarios. This "Practical Guide" aims to address the above issues by providing a series of best practices for using Module Federation. The main content includes two parts:

  1. Bridge: For common business development scenarios: how to load application-level modules (with routing) and how to load modules across different frontend frameworks.
  2. Framework: Introduces the usage of Module Federation in different frameworks.