logologo
指南
实践
配置
插件
案例
博客
生态
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
指南
实践
配置
插件
案例
博客
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
logologo

开始

介绍
设置环境
快速上手
功能导航
名词解释
npm 包

基础

运行时

Runtime 接入
Runtime API
Runtime Hooks
Rsbuild Plugin
Rspack 插件
Webpack Plugin
Rspress Plugin
Vite Plugin
Metro
类型提示
命令行工具
样式隔离

数据管理

数据获取
数据缓存
Prefetch

框架

Modern.js
Next.js

部署

使用 Zephyr Cloud 部署

调试

开启调试模式
Chrome Devtool
全局变量

Troubleshooting

概览

运行时

RUNTIME-001
RUNTIME-002
RUNTIME-003
RUNTIME-004
RUNTIME-005
RUNTIME-006
RUNTIME-007
RUNTIME-008
RUNTIME-009

构建

BUILD-001
BUILD-002

类型

概览
TYPE-001
其他
Edit this page on GitHub
Next Page设置环境

#介绍

#💡 什么是 Module Federation?

Module Federation 是一种 JavaScript 应用分治的架构模式(类似于服务端的微服务),它允许你在多个 JavaScript 应用程序(或微前端)之间共享代码和资源。这可以帮助你:

  • 减少代码重复
  • 提高代码可维护性
  • 降低应用程序的整体大小
  • 提高应用程序的性能

#✨ 什么是 Module Federation 2.0?

与 Webpack 5 内置的 Module Federation 相比,Module Federation 2.0 除了支持原有的模块导出、模块加载和依赖共享等核心功能,还新增了:

  • 动态类型提示
  • Manifest
  • Federation Runtime
  • Runtime Plugin System
  • Chrome Devtool

等特性。这些增强功能使得 Module Federation 2.0 更加适合作为构建和管理大型 Web 应用的微前端架构标准。

#🔥 特性

Module Federation 2.0 具有以下特性:

  • ⚡ 代码共享、依赖复用
  • 📝 Manifest
  • 🎨 Module Federation 运行时
  • 🧩 运行时插件系统
  • 🚀 动态类型提示
  • 🛠️ Chrome Devtool
  • 🦀 Rspack and Webpack Support

#🎯 定位

Module Federation 适用于以下场景:

  • 大型应用程序:对于大型应用程序,可以将应用程序拆分为多个微前端,并使用 Module Federation 在它们之间共享代码和资源。
  • 微前端架构:Module Federation 是构建微前端架构的理想工具。
  • 多团队开发:Module Federation 可以帮助多团队协作开发大型应用程序。

#🕠 Module Federation 历史

Module Federation 是 Webpack 5 中引入的一个新功能,但它的历史可以追溯到 2017 年。当时,Webpack 团队开始研究一种在多个应用程序之间共享代码的方法。

  • 2018 年,Webpack 4.20 发布,引入了 module 钩子,这为 Module Federation 的开发奠定了基础。

  • 2019 年,Webpack 5 发布,正式引入了 Module Federation 功能。

Module Federation 已经成为构建现代 Web 应用程序的强大工具。

#🕰️ Module Federation 未来

Module Federation 希望能成为构建大型 Web 应用的一个架构方式,类似后端的微服务。Module Federation 将会提供更多的能力来满足大型 Web 应用分治所需要的基础能力,目前会包括这几部分内容:

  • 提供完善的 Devtool 工具
  • 提供更多的上层框架能力 Router、Sandbox、SSR
  • 提供大型 Web 应用基于 Module Federation 的最佳实践

#关注我们

  • GitHub - 请给我们点个 star
  • Discord
  • 飞书交流群

#✨ 下一步

你可能想要:

快速上手

了解如何使用 Module Federation

功能导航

了解 Module Federation 提供的所有功能

查阅配置

了解如何配置 Module Federation