# MF 2.0 发布稳定版本：兼顾开发效率与极致性能 一年前，我们将 Module Federation 2.0 ([MF 2.0](https://module-federation.io/zh/blog/announcement.html)) 正式开源，收获了社区众多宝贵的反馈与建议。我们深知，一个现代化的前端框架，不仅要能提升协同开发的效率，更需具备驱动极致性能的内核。因此，我们选择用一年的时间进行深度打磨与能力拓展。 今天，我们很高兴地宣布：**MF 2.0 稳定版正式发布**。它不仅带来了强大的性能优化能力，还覆盖了更全面的部署场景，并对开发者体验进行了深度优化。 ## 全链路性能优化体系 MF 2.0 从 **构建、资源加载、渲染到数据获取** 四个层面，对微前端应用的性能路径进行了系统性重构。 这些能力并非孤立存在，而是协同工作，形成一套面向模块联邦场景的端到端性能优化体系。 **所有能力均支持渐进式接入**，你可以按需启用，不需要一次性改造现有架构，也不会影响已有系统的稳定性。 ### 共享依赖 Tree Shaking 传统共享依赖虽然避免了重复加载，但为了保证完整性，shared 库往往会被 **整库构建并暴露**，即使只用到一小部分，也必须加载全部内容，导致包体积持续膨胀。 在 **MF 2.0** 中，这一问题被解决： **共享依赖也支持 Tree Shaking 了。** 只需开启 treeShaking，MF 即可在不破坏模块联邦动态性的前提下，对共享依赖进行按需裁剪，仅保留真正可能被用到的模块，大幅减少 shared bundle 体积，并保持对现有项目的完全兼容。  MF 2.0 提供两种模式来适配不同场景： - **runtime-infer** :零依赖、即开即用。运行时优先复用已加载的 Tree-Shaken 共享包，若能力不足则自动回退加载完整依赖，保证功能完备；可通过 usedExports 提升复用率。 - **server-calc** :通过服务端或 CI 统一分析多个应用的依赖使用情况，生成全局最优的共享裁剪结果，适用于大型系统。 同时配套**可视化分析页面**，让共享依赖的使用情况与体积收益一目了然。 以 **Ant Design** 这类大型组件库为例，当应用仅使用 Badge、Button、List 三个组件时，在未启用共享依赖 Tree Shaking 的情况下，共享产物体积约为 **1404.2 KB**；启用该能力后，实际加载体积降至 **344.0 KB**，减少了约 **75.5%** 的非必要代码。   ### 服务端渲染（SSR） SSR 通过在服务器端直接生成完整 HTML 并返回给浏览器，使页面无需等待客户端渲染即可显示，大幅提升**首屏加载速度**与**SEO 表现**。在中大型 Web 应用中，SSR 已成为事实上的标准能力。 但在微前端架构下，SSR 一直难以落地。早期 MF 并未覆盖这一能力，开发者不得不在**架构灵活性**与**性能收益** 之间做取舍。 在 **MF 2.0** 中，这一矛盾被消除。 你可以在 **{ props.framework || 'Modern.js' }** 中直接使用 **MF SSR**，让微前端应用同样具备高性能的服务端渲染能力。 { props.ssr || '' } ### 同构的数据预取方案 MF 2.0 提供了一套全新的 **同构数据获取方案**，同时支持 **SSR 与 CSR** 场景，并内置 **prefetch** 与 **cache** API，用于统一数据预取与缓存管理，在不同渲染模式下都能获得稳定、可预测的性能收益。 通过预加载与缓存机制，页面可以在渲染前就准备好关键数据，避免重复请求和瀑布流，从而显著优化首屏与交互响应速度。 { props.dataSolution || '' } { props.serverPreload || '' } ### 能力锈化 在大型项目中，**Manifest 生成**常常成为构建阶段的性能瓶颈。MF 2.0 将这一核心能力迁移至 **Rust 实现**，充分利用其高性能与内存安全特性，大幅降低 Manifest 生成的时间开销。 同时，**AsyncStartUp** 也已完成 Rust 化升级。你不再需要配置异步入口即可获得同等能力，相关的首屏性能隐患也被彻底消除，使应用启动路径更加简洁、稳定且高效。 { props.deploy || '' } ## 更强大的调试体系 MF 2.0 围绕**可观测性与可调试性** 构建了一套完整的调试体系，使共享依赖、模块关系以及潜在副作用都可以被 **直观查看、精确定位与提前发现**，大幅降低动态应用在开发与接入过程中的不确定性。 ### 副作用检测工具 在接入远程模块前，消费者往往需要评估其是否会污染全局变量、注册事件监听或影响样式作用域，这些不确定性是微前端接入成本的重要来源。 MF 2.0 提供 **Side Effect Scanner**，对产物进行静态分析并识别以下副作用： - 全局变量 - 事件监听 - CSS 选择器影响范围 配套的 **CLI 工具** 可自动完成扫描并输出结果，使消费者在接入前即可掌握风险，从而显著降低联邦模块的集成成本。 ### Chrome 插件依赖可视化 我们对原有 Chrome 插件进行了全面升级，提供了全新的 UI 与更强的调试能力，让模块联邦的运行状态 **可见、可查、可验证**。 - 智能侧边栏同步 插件面板会随当前页面自动切换，无需手动刷新或重连，调试体验更加流畅。 - 共享依赖可视化 新增 **Shared** 面板，可直观查看当前页面的共享依赖加载情况，例如： - React 是否被成功共享 - 实际生效的共享版本 - 帮助你快速确认共享策略是否生效。  - 依赖关系快速定位 支持在依赖图谱中搜索任意模块，并以清晰的层级结构展示其上下游关系，让复杂依赖一目了然。  - 数据裁剪模式 在模块数量较多时，可开启裁剪模式以减少代理数据体积，避免因 localStorage 限制导致的注入失败。 _被裁剪的数据仅影响预加载分析，不影响实际功能，可安全开启。_ ## 更丰富的生态 MF 已覆盖主流的 **构建工具、应用框架与 UI 技术栈**，可以在不同技术体系下稳定运行，帮助团队在不改变既有技术选型的前提下引入模块联邦能力。 - **Bundler**：Webpack / Rspack / Rollup / Rolldown - **Build Tool**：Rsbuild / Vite / Metro - **Framework/Tool**：Modern.js / Next.js / Rspress / Rslib / Storybook - **UI Library**：React / Vue / React Native  在此基础上，MF 2.0 进一步将模块联邦能力延伸到更多关键的开发与交付场景中： ### Node.js 场景 模块联邦现已可以在 **Node.js 运行时**中直接使用，使远程模块不仅可以被浏览器加载，也可以在 **SSR、BFF 以及 Node 服务层**被统一消费，实现前后端一致的模块交付模型。 ### Rspress 文档分治场景 在 **Rspress** 中，MF 支持按文档或路由维度拆分并加载远程模块，使大型文档站点可以通过 **模块联邦进行分治与独立发布**，非常适合多团队协作的文档与知识平台。 ### Rstest 在 **Rstest** 测试体系中，模块联邦可以以真实运行时方式加载远程模块，使微前端与模块联邦应用能够进行 **更贴近生产环境的集成测试与端到端测试**，避免测试与实际运行环境割裂。 ## 变更项 ### 版本变更（Minor Changes） 我们注重 **稳定性与兼容性**，因此本次升级不含破坏性变更，仅包含以下微小变更，以下是核心变更说明： ### 微小变更 (Minor Change) - `library.type` 的默认值由 `var` 变更为 `global`。 - `runtimePlugins` 支持配置参数。 ## What's Next? ### React Server Component RSC 是 React 生态的革命性演进。相比 MF x SSR，MF x RSC 组合将带来更极致的性能（体积大幅减少）和更安全的数据操作。我们已在基础 Demo 中跑通该方案，并将在 Modern.js 中提供更好的适配与支持。 ### AI-friendly Design 我们正在为 MF 逐步补齐 **AI 使用组件与模块所需的上下文与元数据**，包括能力边界、使用约束、运行环境与依赖关系，并引入**可量化的评分与可信度机制**，让组件资产能够被 AI 理解、评估与选择。 { props.aiFriendly || '' } { props.next || '' }