Frontend Academy · 课时

微前端：模块联邦

使用 Webpack Module Federation 或 Vite Federation，将大型前端拆分为可独立部署、由外壳应用使用的远程模块。

微前端：模块联邦 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是微前端

将大型前端拆分为可以独立开发和部署的部分——通常每个团队或业务领域负责一个部分。每个部分都可以拥有自己的框架、仓库、部署流程，甚至技术栈。一个外壳应用会在运行时将它们连接起来。

为什么使用微前端

拥有 10 个以上前端团队的组织会遇到各种限制：单一仓库成为瓶颈、构建时间过长、发布计划相互冲突。微前端让团队可以独立交付，但代价是架构复杂度更高。

模块联邦——核心技术

Webpack Module Federation（Webpack 5，也可通过插件用于 Vite）允许外壳应用在运行时从独立部署的远程应用中导入代码。远程应用公开特定模块，外壳应用则使用这些模块。

远程应用配置

远程应用通过 webpack 配置公开自己的模块。

// remote app: webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  output: { publicPath: 'https://product-team.example.com/' },
  plugins: [
    new ModuleFederationPlugin({
      name: 'productApp',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductPage': './src/ProductPage',
        './productClient': './src/api/client'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

外壳（主机）配置

外壳应用声明要导入哪些远程应用。

// shell app: webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        product: 'productApp@https://product-team.example.com/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

导入远程模块

使用动态导入——webpack 会通过联邦运行时解析它。

// shell src/App.tsx
import { lazy, Suspense } from 'react';

const ProductPage = lazy(() => import('product/ProductPage'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <ProductPage />
    </Suspense>
  );
}

Vite 联邦

Vite 通过 @originjs/vite-plugin-federation 插件支持 Module Federation，接口相似。

// vite.config.ts
import federation from '@originjs/vite-plugin-federation';

export default {
  plugins: [federation({
    name: 'shell',
    remotes: { product: 'https://product-team.example.com/remoteEntry.js' },
    shared: ['react', 'react-dom']
  })]
};

共享依赖

将 React 等库列入 shared，这样它们就不会被重复打包。联邦运行时会在运行时解析兼容的最高版本。

独立部署

每个远程应用都有自己的构建和部署流程。外壳应用指向一个 URL——推送新的远程应用后，所有使用者都会自动获得更新。

应用之间的通信

不要通过直接导入共享状态——请使用事件（CustomEvent）、小型共享总线或 postMessage。保持边界清晰，才能维持各自的独立性。

替代方案：内嵌框架与 Web 组件

内嵌框架：隔离性最强，但导航和 CSS 使用不便。Web 组件：浏览器原生支持，不受框架绑定，但共享状态有限。模块联邦在隔离性与开发体验之间取得了平衡。

权衡

优势：可独立部署、技术选择自由、团队自治。代价：构建配置复杂、共享依赖冲突、运行时错误难以调试、代码包复杂度增加。只有真正规模庞大的组织才值得采用。

应避免使用的情况

单团队项目、MVP，以及前端团队人数少于 100 人的网站。复杂度成本确实存在——大多数团队应该改用单体仓库。

快速检查

Webpack 模块联邦在微前端架构中实现了什么？

回顾：微前端

按团队或领域拆分前端，以实现独立部署。模块联邦（webpack 5 / Vite 插件）让 shell 在运行时从远程模块导入内容。Remote 暴露模块，shell 声明 remotes，双方共享 react 等依赖。使用事件进行跨应用通信。它很复杂，应仅用于真正规模庞大的组织。

常见问题解答

「微前端：模块联邦」课时是免费的吗？

是的 — 「微前端：模块联邦」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「微前端：模块联邦」这节课中我会学到什么？

使用 Webpack Module Federation 或 Vite Federation，将大型前端拆分为可独立部署、由外壳应用使用的远程模块。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「微前端：模块联邦」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy