Vite 重磅更新！Module Federation 2.0 发布！

首页

业界动态

热心网友

转载

2026-04-22

Module Federation 2.0 官宣：Vite生态的“微前端”拼图，终于补齐了

在前端工程化的演进路上，模块联邦（Module Federation）早已不是什么新名词。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

如果你深度使用过 Webpack 5，大概率已经接触甚至实践过它。但一个不争的事实是，在 Vite 生态中，这项能力长期处于缺失状态。甚至有不少团队，仅仅因为“Vite 没有 Module Federation”，而选择继续坚守 Webpack。

直到最近，一个关键节点出现了：

官方正式推进 Module Federation 2.0，并明确推荐使用 @module-federation/vite。这意味着什么？

这意味着，Module Federation 正在从一个“Webpack 专属特性”，演变为“前端基础设施”的一部分。而 Vite 生态，也终于补上了这块至关重要的拼图。

一、什么是模块联邦（Module Federation）？

如果你还不熟悉，那确实该补补课了。

用最简单的一句话解释：Module Federation 就是可以让多个独立的前端应用在运行时“动态组合”起来，并且能智能地共享依赖。

1. 它解决了什么问题？

在没有 Module Federation 的时代，多应用共享代码要么靠复制粘贴，要么靠发布到 npm 再安装，流程冗长，且依赖容易冲突。

Module Federation 带来的改变是碘伏性的：

运行时加载远程模块：代码无需预先打包在一起。
多应用独立开发 + 独立部署：每个部分都能自治。
依赖自动共享：像 React、Vue 这样的框架库，多个应用共用同一个实例，不会重复加载。

它的本质，就是把“模块共享”这件事，从构建时搬到了运行时。

2. 核心概念

Module Federation 的核心架构其实很清晰，主要围绕三个角色展开（这个面试时经常被问到）：

Host（宿主应用）：消费、使用远程模块的应用。
Remote（远程应用）：暴露自身模块供他人使用的应用。
Shared（共享依赖）：所有应用约定共同使用的第三方依赖，如 React、Vue、lodash 等。

它们的关系可以理解为：Host（主应用）动态地去加载 Remote A、Remote B 等远程模块。值得注意的是，一个应用完全可以同时扮演 Host 和 Remote 两种角色。

3. 核心能力

(1) 动态加载模块

通过 import(“remote/Button”) 这样的语法，就能像使用本地模块一样，无缝引入远程代码。

(2) 依赖共享

通过配置 shared: { react: { singleton: true } }，可以确保所有应用共享同一个 React 实例，避免版本冲突和包体积膨胀。

(3) 独立部署

子应用可以单独更新、发版，主应用无需重新构建或发布，真正实现了“前端微服务”的构想。

4. 典型应用场景

微前端架构：大型系统按业务（如用户、订单、商品系统）拆分，由不同团队并行开发。
组件远程复用：UI 组件库动态加载，无需频繁发布 npm 包。
插件化系统：功能模块支持运行时按需加载，便于实现 A/B 测试或功能开关。
渐进式重构：在老旧系统中，逐步替换或插入新的功能模块。

二、Module Federation 2.0：关键变化

如果说之前是铺垫，那么这次 2.0 的升级方向，才是真正“重磅”的部分。

1. 从 Webpack 插件 → Runtime 系统

以前：MF = 一个 Webpack 插件。
现在：MF = 一个独立的运行时系统 + 一套协议。

2. 脱离构建工具

现在，它开始广泛支持：

Vite
Rspack
Rollup（间接支持）
甚至未来可能支持无打包（Bundler-less）场景

它不再与 Webpack 深度绑定。

3. 新能力

2.0 版本带来了一系列增强：更完善的 Manifest 支持、运行时解耦、插件系统、开发者工具以及更好的类型支持。

4. 一个关键认知（非常重要）

必须明确一点：Module Federation 的核心价值不在于打包器，而在于运行时。这恰恰解释了为什么官方最新的选择，不是在 Rolldown 里重写 MF，而是直接推进 @module-federation/vite。

这也是本次更新的核心主角——让 Vite 原生、完整地拥有 Module Federation 能力。

三、如何使用 module-federation/vite？

上手并不复杂。

安装：

npm install @module-federation/vite

Remote（子应用）配置示例：

import { federation } from “@module-federation/vite”;

export default {
  plugins: [
    federation({
      name: “remote_app”,
      filename: “remoteEntry.js”,
      exposes: {
        “./App”: “./src/App.vue”
      },
      shared: [“vue”]
    })
  ]
};

Host（主应用）配置示例：

import { federation } from “@module-federation/vite”;

export default {
  plugins: [
    federation({
      name: “host_app”,
      remotes: {
        remote: {
          type: “module”,
          entry: “https://localhost:5001/remoteEntry.js”
        }
      },
      shared: [“vue”]
    })
  ]
};

使用远程模块：

之后，在主应用中就可以直接动态导入：