发布公告#

April 24, 2024

今天我们很高兴跟大家宣布 Module Federation 2.0 正式发布了！Module Federation 2.0 是由 ByteDance Web Infra 团队和 @Zack Jackson 推出的新版本，它解决了原有 Module Federation 存在的诸多问题，新版本基于 Bytedance 内实践和 Module Federation 原有社区生态实现 。

为什么要做 Module Federation 2.0？#

Module Federation 作为 Webpack 5 推出的重磅功能距离发布至今已经三年有余，Module Federation 作为一种模块共享方案已经在被广泛使用，它受到了大型 Web 项目的欢迎，它让开发大型 Web 应用和团队协同变更的更加高效和简单，但随着 Module Federation 被更加广泛的使用带来了较多新的问题：

• 缺乏最佳实践：Module Federation 过去作为 Webpack 5 的一个内置插件，没有独立的站点导致缺乏针对 Module Federation 的最佳实践对于各个配置的解释和使用场景不够全面。
• Runtime 与构建工具耦合：Module Federation 过去作为 Webpack 5 的一个内置插件， Runtime 和构建工具存在耦合，导致脱离构建工具无法加载 MF 的远程模块，所有构建工具都需要从零实现 Module Federation，维护成本高且标准无法统一。
• 类型安全：Module Federation 对比传统的 NPM 包，带来了另一个劣势就是由于 Module Federation 运行时加载的特性导致的不具备 TypeScript 类型提示。
• 调试工具：Module Federation 作为一种微前端的架构模式，缺乏分析和调试工具来完成新的满足新的开发方式，团队协作成本变高。
• 部署平台：Module Federation 在过去主要通过 remoteEntry.js 来进行远程模块的加载和提供，Module Federation 缺乏通用的协议来打通部署平台让资源和版本变得更加可控。

Module Federation 2.0 特性介绍#

Module Federation 新文档站#

新文档中包含了 Module Federation 的适用场景和功能介绍，包括如何从零使用 Rspack 创建到使用 Module Federation 的介绍，对 Module Federation 插件的配置增加了更详细的说明和介绍！

Module Federation 模块加载更加灵活#

新版本 Module Federation 将内置在 Webpack 中的 Module Federation Runtime 能力抽离成了一个独立的 SDK，能够脱离构建工具动态注册远程模块、加载远程模块、注册 Shared，模块预加载并使用运行时插件，使其能够对于加载过程有更强的控制。

import { init, loadRemote } from '@module-federation/enhanced/runtime';

init({
  name: '@demo/app-main',
  remotes: [
    {
      name: "@demo/app1",
      entry: "http://localhost:3005/mf-manifest.json",
      alias: "app1"
    },
    {
      name: "@demo/app2",
      entry: "http://localhost:3006/remoteEntry.js",
      alias: "app2"
    },
  ],
});

loadRemote("app2/util").then((md)=>{
  md.add(1,2,3);
});

统一 Module Federation 构建工具运行时#

新版 Rspack 和 Webpack 的 Module Federation 插件基于新版 Runtime 实现，构建工具不需要直接耦合 Module Federation Runtime 相关逻辑，并且能够享受到新版 Runtime 提供的插件机制和预加载能力，其他的构建工具也可以基于该标准实现 Module Federation 能够降低维护成本并保持运行时的标准保持统一。

类型提示#

新版 Module Federation 推出了一项非常重磅的功能：动态模块类型提示能力！该功能解决了 Module Federation 从本地模块变成动态远程模块后的 TypeScript 项目类型失效问题，使用新版 Module Federation 插件会自动生成和消费远程类型，当项目都在本地启动时可以达到 npm link 一样的类型热更新体验。

Module Federation Devtool#

Module Federation Devtool 是专门为 Module Federation 开发的一款调试工具，通过这个调试工具可以清晰的看到 Module Federation 模块间的依赖关系以及 Expose、shared 设置情况，并且通过该 Devtool 还可以将线上页面中的 Module Federation 模块直接代理到线下，并保持热更新的开发体验！

Manifest 协议#

Manifest 文件是使用新版本 Module Federation 插件项目构建后所生成的文件，该文件中会存储 Module Federation 相关的基础信息，包括：remoteEntry、shared、exposes、remotes、type 信息，这些信息可以作为原信息分析 Module Federation 项目间的依赖关系，并且基于这份文件可以实现自己的物料平台并打通各个部署平台从而对 Module Federation 模块的版本和灰度有更好的控制，构建插件和运行时还可以直接消费该文件协议，基于这份文件协议可以提供更多进阶的功能，新版本的动态类型提示正是基于该文件协议实现。

致谢#

新版 Module Federation 离不开社区内各个项目的启发和支持，在这里对这些项目表示致敬和感谢：

• Webpack Module Federation，新版 Module Federation 对其进行了 fork 并在此基础上进行了重新设计和实现。
• Module Federation Universe 仓库，Universe 原有实现对是新版 Module Federation 的基础。
• Rspack 项目，Rspack 团队基于 Module Federation Runtime 实现了 Module Federation，使得 Module Federation 2.0 能够完全兼容 Rspack 生态。

未来计划#

优化开发者体验#

尽管新版本我们提供了动态类型提示和 Chrome devtool，但目前 Chrome devtool 的能力仍然较弱，我们希望增强 Module Federation 的调试工具，例如：增加 shared 复用可视化。

提供高性能方案#

Module Federation 作为一种微前端的架构方案，也同时拥有微前端架构带来的“请求瀑布问题”，因此 Module Federation 将会提供高性能的解决方案例如：SSR、Data prefetch 等方案。

跟社区内的伙伴合作#

Module Federation 2.0 推出的新功能目前仅在 Webpack、Rspack 构建工具上提供了支持，Module Federation 提供了较多基础能力的 SDK，其他构建工具可以基于该能力进行上层封装。Module Federation 目前更多的是作为一个模块共享的解决方案，我们计划结合上层框架提供更多基于 Module Federation 微前端架构的最佳实践，用于满足大型 Web 应用的微前端架构开发诉求。