微前端技术选型-带你认识微前端架构

你是不是也遇到过这种情况：项目刚开始时，代码清爽，构建飞快，改个 Bug 几秒钟就能看到效果。但随着业务不断迭代，项目越来越大，构建时间从 30 秒变成 5 分钟，再变成 10 分钟。改一行代码，等半天才能看到效果，开发体验直线下降。

更要命的是，团队越来越大，不同团队用不同的技术栈：老项目用 Vue 2，新项目想用 React，结果只能硬着头皮继续用 Vue 2，技术债越积越多。每次发版都是惊心动魄，生怕一个小改动影响了其他模块，导致线上故障。

这时候，你可能听说过"微前端"这个概念。但市面上方案这么多：qiankun、micro-app、Module Federation……到底该选哪个？每个方案都说自己好，但真正用起来坑在哪里？

这篇文章不讲虚的，只讲实战。我会从真实项目经验出发，深度对比这三种主流微前端方案，告诉你：

• 它们的核心原理是什么
• 各自的优缺点在哪里
• 什么场景适合用哪个方案
• 如何做出正确的技术选型决策

如果你正在考虑引入微前端，这篇文章能帮你少踩很多坑。

微前端发展历程

微前端从 2016 年发展至今，经历了三个阶段。了解这个历程，能帮你理解为什么会有这么多方案。

1. 为什么需要微前端

1.1 单体应用的三大痛点

先说说为什么会有微前端这个东西。如果单体应用没问题，谁会没事找事拆分架构？

1.2 微前端如何解决这些问题

微前端的核心思想很简单：把一个大应用拆成多个小应用，每个小应用独立开发、独立部署、独立运行。

举个例子：

还是那个金融交易平台，拆成微前端后：

• 主应用：负责导航、权限、布局（React）
• 交易系统子应用：独立仓库，独立部署（React）
• 资管系统子应用：独立仓库，独立部署（Vue 3）
• 开户系统子应用：独立仓库，独立部署（Vue 2）
• 做市系统子应用：独立仓库，独立部署（React）
• 风控系统子应用：独立仓库，独立部署（React）

效果：

• 构建时间：从 12 分钟降到 2 分钟（只构建改动的子应用）
• 发版风险：改资管模块，只发布资管子应用，不影响交易
• 技术栈：新模块用 Vue 3/React，老模块继续用 Vue 2，逐步迁移

1.2.1 有同事问：为什么不用 Monorepo？

有次在分享会上讲完这些后，有同事问："既然项目大，为什么不直接用 Monorepo 架构呢？Monorepo 也能把代码拆分成多个包，也能独立开发，为什么还要搞微前端？"

这是个好问题！很多人容易把 Monorepo 和微前端混淆。让我们先分别理解它们是什么，再看它们的区别。

一、Monorepo 是什么？

二、微前端是什么？

三、分阶段对比

Monorepo 和微前端不是同一层面的概念，它们在不同阶段发挥作用：

四、它们的关系

finance-platform/          （Monorepo 仓库）
├── apps/
│   ├── shell/             （主应用）
│   ├── trading/           （交易子应用）
│   ├── asset/             （资管子应用）
│   └── risk/              （风控子应用）
├── packages/
│   ├── shared-components/ （共享组件库）
│   └── shared-utils/      （共享工具函数）
└── package.json           （统一依赖管理）

五、各自的局限

1.3 微前端适用场景

微前端不是银弹，不是所有项目都适合。

1.4 微前端架构图

2. QianKun框架

2.1 qiankun 是什么？

2.2 qiankun 核心概念

1. 主应用（基座应用）

• 负责注册和加载子应用
• 管理全局路由和权限
• 提供全局状态和通信机制

2. 子应用（微应用）

• 独立开发、独立部署
• 导出生命周期函数（bootstrap、mount、unmount）
• 可以是任何技术栈

3. 生命周期

• bootstrap：子应用初始化（只执行一次）
• mount：子应用挂载（每次激活时执行）
• unmount：子应用卸载（每次切换时执行）

4. 工作原理

qiankun 加载子应用的流程如下：

从流程图可以看出，qiankun 是在浏览器运行时动态加载子应用的全部资源，这就是为什么它被称为「运行时集成」方案。

2.3 快速上手

主应用配置

// main.js
import { registerMicroApps, start } from 'qiankun';

// 注册子应用
registerMicroApps([
  {
    name: 'trading-system',           // 子应用名称
    entry: '//localhost:3001',        // 子应用地址
    container: '#subapp-container',   // 子应用挂载的容器
    activeRule: '/trading',           // 激活路由
  },
  {
    name: 'asset-system',
    entry: '//localhost:3002',
    container: '#subapp-container',
    activeRule: '/asset',
  },
]);

// 启动 qiankun
start();

子应用配置（以 React 为例）

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

let root = null;

// 导出生命周期函数
export async function bootstrap() {
  console.log('交易系统初始化');
}

export async function mount(props) {
  console.log('交易系统挂载', props);

  const container = props.container || document.querySelector('#root');

  root = ReactDOM.createRoot(container);
  root.render(<App />);
}

export async function unmount(props) {
  console.log('交易系统卸载');
  root?.unmount();
}

// 独立运行时的逻辑
if (!window.__POWERED_BY_QIANKUN__) {
  mount({});
}

子应用 Webpack 配置

// webpack.config.js
module.exports = {
  output: {
    library: 'tradingSystem',        // 子应用名称
    libraryTarget: 'umd',            // 必须是 umd 格式
    publicPath: '//localhost:3001/', // 子应用地址
  },
  devServer: {
    port: 3001,
    headers: {
      'Access-Control-Allow-Origin': '*', // 允许跨域
    },
  },
};

2.4 实战：金融平台微前端改造

下面演示如何用 qiankun 把交易系统（React）和资管系统（Vue 3）集成到主应用中，实现独立开发部署、共享登录状态。

主应用配置（React）

// src/App.jsx
import { registerMicroApps, start, initGlobalState } from 'qiankun';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 初始化全局状态（用于应用间通信）
    // user 和 token 从登录接口获取
    const actions = initGlobalState({
      user: { id: 1001, name: '张三', role: 'trader' },
      token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
    });

    // 注册子应用
    registerMicroApps([
      {
        name: 'trading-system',
        entry: '//localhost:3001',
        container: '#subapp-container',
        activeRule: '/trading',
        props: { actions }, // 传递全局状态
      },
      {
        name: 'asset-system',
        entry: '//localhost:3002',
        container: '#subapp-container',
        activeRule: '/asset',
        props: { actions },
      },
    ]);

    // 启动 qiankun
    start({
      sandbox: { strictStyleIsolation: true }, // 开启严格样式隔离
    });
  }, []);

  return (
    <div className="main-app">
      <nav>
        <a href="/trading">交易系统</a>
        <a href="/asset">资管系统</a>
      </nav>
      <div id="subapp-container"></div>
    </div>
  );
}

export default App;

子应用改造（交易系统 - React）

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

let root = null;

export async function bootstrap() {
  console.log('[交易系统] 初始化');
}

export async function mount(props) {
  console.log('[交易系统] 挂载', props);

  // 接收主应用传递的全局状态
  props.actions.onGlobalStateChange((state, prev) => {
    console.log('[交易系统] 全局状态变化', state, prev);
  });

  // 获取用户信息
  const { user, token } = props.actions.getGlobalState();
  console.log('[交易系统] 用户信息', user, token);

  // 渲染应用
  const container = props.container || document.querySelector('#root');

  root = ReactDOM.createRoot(container);
  root.render(<App user={user} token={token} />);
}

export async function unmount(props) {
  console.log('[交易系统] 卸载');
  root?.unmount();
}

// 独立运行
if (!window.__POWERED_BY_QIANKUN__) {
  mount({
    actions: {
      onGlobalStateChange: () => {},
      getGlobalState: () => ({ user: null, token: null }),
    },
  });
}

子应用改造（资管系统 - Vue 3）

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

let app = null;

export async function bootstrap() {
  console.log('[资管系统] 初始化');
}

export async function mount(props) {
  console.log('[资管系统] 挂载', props);

  // 接收主应用传递的全局状态
  props.actions.onGlobalStateChange((state, prev) => {
    console.log('[资管系统] 全局状态变化', state, prev);
  });

  // 获取用户信息
  const { user, token } = props.actions.getGlobalState();

  // 渲染应用
  const container = props.container || document.querySelector('#app');

  app = createApp(App);
  app.provide('user', user);
  app.provide('token', token);
  app.mount(container);
}

export async function unmount(props) {
  console.log('[资管系统] 卸载');
  app?.unmount();
}

// 独立运行
if (!window.__POWERED_BY_QIANKUN__) {
  mount({
    actions: {
      onGlobalStateChange: () => {},
      getGlobalState: () => ({ user: null, token: null }),
    },
  });
}

运行效果

当用户访问 /trading 路由时，最终的 HTML 结构如下：

<div class="main-app">
  <nav>
    <a href="/trading">交易系统</a>
    <a href="/asset">资管系统</a>
  </nav>
  <div id="subapp-container">
    <!-- qiankun 会把交易系统直接挂载到这个容器中 -->
    <!-- 交易系统的 React 组件渲染内容 -->
  </div>
</div>

从上面的代码可以看出，qiankun 的接入流程很清晰：主应用通过 registerMicroApps 注册子应用，子应用导出 bootstrap/mount/unmount 三个生命周期函数，通过 initGlobalState 实现应用间通信。那 qiankun 用起来到底怎么样？我们来看看它的优缺点。

2.5 qiankun 的优缺点

三、micro-app：能不能更简单一点？

用了一段时间 qiankun 之后，你可能会有这样的感受：

• 子应用必须导出三个生命周期函数，改造成本不低
• Webpack 配置要改成 UMD 格式，新手容易踩坑
• 主应用注册子应用的代码有点啰嗦

这时候你可能会想：有没有更简单的方案？

京东的 micro-app 就是冲着这个痛点来的。它的核心理念是：像使用 iframe 一样简单，但没有 iframe 的各种问题。

3.1 micro-app 的核心思路

micro-app 基于 Web Components 的思想，把子应用封装成一个自定义 HTML 标签：

<!-- 就像用 iframe 一样，但不是 iframe -->
<micro-app name="trading" url="http://localhost:3001"></micro-app>

对比一下 qiankun 的写法：

// qiankun 需要用 JS 注册子应用
registerMicroApps([
  {
    name: 'trading',
    entry: '//localhost:3001',
    container: '#container',
    activeRule: '/trading',
  },
]);
start();

哪个更直观？一目了然。

3.2 快速上手

安装

npm install @micro-zoe/micro-app

主应用配置（React）

// src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import microApp from '@micro-zoe/micro-app';
import App from './App';

// 初始化 micro-app
microApp.start();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

就这么简单，主应用只需要调用 microApp.start() 初始化一下。

主应用使用子应用

// src/App.jsx
import { useEffect } from 'react';

function App() {
  return (
    <div className="main-app">
      <nav>
        <a href="/trading">交易系统</a>
        <a href="/asset">资管系统</a>
      </nav>

      {/* 直接用标签嵌入子应用，就像用 img 标签一样自然 */}
      <micro-app
        name="trading"
        url="http://localhost:3001"
        baseroute="/trading"
      ></micro-app>
    </div>
  );
}

export default App;

子应用改造

这是 micro-app 最爽的地方：子应用几乎不用改代码。

只需要做两件事：

1. 设置跨域（开发环境）

// vite.config.js（子应用）
export default defineConfig({
  server: {
    port: 3001,
    cors: true,  // 允许跨域
    origin: 'http://localhost:3001',  // 保证静态资源路径正确
  },
});

2. 处理路由基础路径（可选）

// src/router.js（子应用）
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  // 如果是被 micro-app 加载，使用主应用传递的 baseroute
  history: createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || '/'),
  routes: [...],
});

没了。真的没了。

对比一下 qiankun 子应用要做的事：

micro-app 把这些复杂度都藏在了框架内部，子应用基本上可以当普通项目来开发。

3.3 实战：金融平台微前端改造

还是用交易系统（React）和资管系统（Vue 3）的例子，看看用 micro-app 怎么做。

主应用配置（React）

// src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import microApp from '@micro-zoe/micro-app';
import App from './App';

microApp.start({
  // 全局配置
  'disable-sandbox': false,  // 开启沙箱（默认开启）
  'disable-scopecss': false, // 开启样式隔离（默认开启）
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

主应用路由和子应用嵌入

// src/App.jsx
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

// 交易系统页面
function TradingPage() {
  return (
    <micro-app
      name="trading"
      url="http://localhost:3001"
      baseroute="/trading"
      // 向子应用传递数据
      data={{ user: { id: 1001, name: '张三' }, token: 'xxx' }}
    ></micro-app>
  );
}

// 资管系统页面
function AssetPage() {
  return (
    <micro-app
      name="asset"
      url="http://localhost:3002"
      baseroute="/asset"
      data={{ user: { id: 1001, name: '张三' }, token: 'xxx' }}
    ></micro-app>
  );
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/trading">交易系统</Link>
        <Link to="/asset">资管系统</Link>
      </nav>

      <Routes>
        <Route path="/trading/*" element={<TradingPage />} />
        <Route path="/asset/*" element={<AssetPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

子应用接收数据（交易系统 - React）

// src/App.jsx（交易系统）
import { useEffect, useState } from 'react';

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 获取主应用传递的数据
    const data = window.microApp?.getData();
    if (data) {
      setUser(data.user);
      console.log('收到主应用数据', data);
    }

    // 监听主应用数据变化
    const dataListener = (data) => {
      console.log('主应用数据更新', data);
      setUser(data.user);
    };

    window.microApp?.addDataListener(dataListener);

    return () => {
      window.microApp?.removeDataListener(dataListener);
    };
  }, []);

  return (
    <div>
      <h1>交易系统</h1>
      {user && <p>当前用户：{user.name}</p>}
    </div>
  );
}

export default App;

子应用接收数据（资管系统 - Vue 3）

<!-- src/App.vue（资管系统） -->
<template>
  <div>
    <h1>资管系统</h1>
    <p v-if="user">当前用户：{{ user.name }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const user = ref(null);

onMounted(() => {
  // 获取主应用传递的数据
  const data = window.microApp?.getData();
  if (data) {
    user.value = data.user;
    console.log('收到主应用数据', data);
  }

  // 监听主应用数据变化
  window.microApp?.addDataListener(dataListener);
});

function dataListener(data) {
  console.log('主应用数据更新', data);
  user.value = data.user;
}

onUnmounted(() => {
  window.microApp?.removeDataListener(dataListener);
});
</script>

运行效果

当用户访问 /trading 路由时，最终的 HTML 结构如下：

<div class="main-app">
  <nav>
    <a href="/trading">交易系统</a>
    <a href="/asset">资管系统</a>
  </nav>

  <!-- micro-app 是一个自定义元素 -->
  <micro-app name="trading" url="http://localhost:3001">
    <!-- 子应用的内容被渲染在这里 -->
    <!-- micro-app 默认通过 CSS 前缀实现样式隔离，不是真正的 Shadow DOM -->
    <div data-micro-app="trading">
      <h1>交易系统</h1>
      <p>当前用户：张三</p>
    </div>
  </micro-app>
</div>

从代码量和改造成本来看，micro-app 确实比 qiankun 简单不少。主应用只需要用标签嵌入，子应用几乎不用改。

3.4 micro-app 的优缺点

3.5 qiankun vs micro-app：怎么选？

说了这么多，qiankun 和 micro-app 到底选哪个？简单总结一下：

那有没有一种方案，既能享受微前端的好处，又能解决运行时加载和类型安全的问题？

有的。下一部分我们来聊聊 Module Federation。

四、Module Federation：终于等到你

4.1 用了 qiankun/micro-app 之后的困惑

我之前用 qiankun 搭建了金融平台的微前端架构，5 个子应用（交易、资管、开户、做市、风控）跑起来了，但用了一段时间后，我发现了一些让我很难受的问题。

先说明一下：qiankun 和 micro-app 是两个独立的微前端框架，但它们的设计思路相似——都是「运行时加载整个子应用」。下面说的问题，两个框架都存在。

问题一：加载太重，React 加载了好几份

我们 5 个子应用里有 3 个用 React（交易、做市、风控），2 个用 Vue（资管用 Vue 3、开户用 Vue 2）。每个子应用打包后都包含一份完整的框架代码。用户访问首页，加载主应用 + 交易系统，光 React 就加载了 2 份。

这不是 bug，这是 qiankun/micro-app 的设计决定的——它们把子应用当成「独立网页」来加载，自然每个子应用都要带上自己的依赖。

问题二：只想用一个组件，却要加载整个子应用

有个需求：在首页 Dashboard 上展示交易系统的「快捷下单」组件和风控系统的「风险预警」组件。

用 qiankun 怎么做？

// qiankun：手动加载子应用到指定容器
loadMicroApp({
  name: 'trading',
  entry: 'http://localhost:3001',
  container: '#trading-container',  // 只想要一个组件，却要加载整个交易系统
});

loadMicroApp({
  name: 'risk',
  entry: 'http://localhost:3005',
  container: '#risk-container',     // 只想要一个预警组件，却要加载整个风控系统
});

用 micro-app 怎么做？

<!-- micro-app：用标签加载 -->
<micro-app name="trading" url="http://localhost:3001" />
<micro-app name="risk" url="http://localhost:3005" />

两个小组件，加载了 2 个完整应用，总共 4MB+ 的 JS。这合理吗？

问题三：子应用强依赖主应用

qiankun/micro-app 的子应用必须通过主应用的「坑位」才能渲染。如果我想让交易系统独立访问，或者让资管系统引用交易系统的组件，做不到。

问题四：没有类型安全

主应用传给子应用的数据没有类型检查。改了 user 对象的字段名，TypeScript 不会报错，只能在运行时发现问题。

4.2 qiankun/micro-app 的加载流程

先看看 qiankun/micro-app 是怎么加载子应用的：

问题很明显：每次都要加载完整的子应用 JS，包括重复的 React。

4.3 我理想中的微前端

如果有一种方案，能做到这些就好了：

• 按需加载：我只想用「快捷下单」组件，就只加载这个组件的代码
• 共享依赖：React 只加载一份，5 个子应用共用
• 独立运行：子应用可以独立跑，也可以被其他应用引用
• 类型安全：import 的时候有类型提示，重构不怕漏改

这就是 Module Federation 的设计理念。

4.4 Module Federation 是什么

Module Federation（模块联邦）是 Webpack 5 引入的功能，Vite 通过 @originjs/vite-plugin-federation 插件也支持了。本文的示例都基于 Vite，如果你用 Webpack 5，配置方式略有不同但原理一样。

它的核心思想是：

看看 Module Federation 的加载流程：

对比一下：

4.5 开发阶段：5 个子应用、10 个前端怎么协作

我们团队有 10 个前端开发，维护 5 个子应用。来看看不同方案的开发体验：

常规方案（npm 包共享）

• 改了公共组件 → 发布 npm 包 → 每个项目升级版本 → 重新构建
• 调试痛苦：改一行代码，要等 npm 发布，其他项目才能看到效果

qiankun/micro-app

• 子应用独立开发，但调试时必须启动主应用
• 想看效果？启动主应用 + 子应用，至少 2 个终端

Module Federation

• 改了交易系统的组件 → 资管系统实时看到效果（热更新）
• 不需要发 npm 包，不需要重新构建
• 每个应用可以独立运行，也可以引用其他应用的模块

4.6 实战：金融平台微前端改造

现在用 Module Federation 重构我们的金融平台，5 个子应用：

• 交易系统（React）：暴露「快捷下单」「持仓列表」组件
• 资管系统（Vue 3）：暴露「净值曲线」「持仓分析」组件
• 开户系统（Vue 2）：暴露「开户表单」组件
• 做市系统（React）：暴露「报价面板」组件
• 风控系统（React）：暴露「风险预警」「风控报表」组件

交易系统配置（暴露组件）

// trading-system/vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'trading',
      filename: 'remoteEntry.js',
      // 暴露组件给其他应用使用
      exposes: {
        './QuickOrder': './src/components/QuickOrder.jsx',
        './PositionList': './src/components/PositionList.jsx',
      },
      // 共享依赖，避免重复加载
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
      },
    }),
  ],
  build: {
    target: 'esnext',
  },
});

风控系统配置（暴露组件）

// risk-system/vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'risk',
      filename: 'remoteEntry.js',
      exposes: {
        './RiskAlert': './src/components/RiskAlert.jsx',
        './RiskReport': './src/components/RiskReport.jsx',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
      },
    }),
  ],
  build: {
    target: 'esnext',
  },
});

主应用配置（引用远程组件）

// main-app/vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'main',
      // 声明远程应用
      remotes: {
        trading: {
          external: 'http://localhost:3001/assets/remoteEntry.js',
          format: 'esm',
        },
        risk: {
          external: 'http://localhost:3005/assets/remoteEntry.js',
          format: 'esm',
        },
        asset: {
          external: 'http://localhost:3002/assets/remoteEntry.js',
          format: 'esm',
        },
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
      },
    }),
  ],
});

主应用使用远程组件

// main-app/src/pages/Dashboard.jsx
import { lazy, Suspense } from 'react';

// 动态导入远程组件，就像导入本地组件一样
const QuickOrder = lazy(() => import('trading/QuickOrder'));
const RiskAlert = lazy(() => import('risk/RiskAlert'));
const NetValueChart = lazy(() => import('asset/NetValueChart'));

function Dashboard() {
  return (
    <div className="dashboard">
      <h1>金融平台 Dashboard</h1>

      <div className="grid">
        {/* 交易系统的快捷下单组件 */}
        <Suspense fallback={<div>加载中...</div>}>
          <QuickOrder />
        </Suspense>

        {/* 风控系统的风险预警组件 */}
        <Suspense fallback={<div>加载中...</div>}>
          <RiskAlert />
        </Suspense>

        {/* 资管系统的净值曲线组件 */}
        <Suspense fallback={<div>加载中...</div>}>
          <NetValueChart />
        </Suspense>
      </div>
    </div>
  );
}

export default Dashboard;

看到了吗？同一个页面，展示了 3 个不同子应用的组件，每个组件按需加载，React 只有一份。

这是 qiankun/micro-app 做不到的——它们只能加载完整的子应用，不能只加载某个组件。

4.7 部署方案

Module Federation 的部署和普通前端项目一样，每个应用独立构建、独立部署。

Nginx 配置

# nginx.conf
server {
    listen 80;
    server_name finance.example.com;

    # 主应用
    location / {
        root /www/main-app/dist;
        try_files $uri $uri/ /index.html;
    }

    # 交易系统（远程模块）
    location /trading/ {
        alias /www/trading-system/dist/;
        add_header Access-Control-Allow-Origin *;
    }

    # 资管系统（远程模块）
    location /asset/ {
        alias /www/asset-system/dist/;
        add_header Access-Control-Allow-Origin *;
    }

    # 风控系统（远程模块）
    location /risk/ {
        alias /www/risk-system/dist/;
        add_header Access-Control-Allow-Origin *;
    }
}

CICD 流程

每个子应用独立部署，更新后其他应用自动获取最新版本，不需要重新构建主应用。

4.8 Module Federation 的优缺点

4.9 三种方案对比总结

五、总结

微前端不是银弹，选型要根据实际场景：

• 如果你的项目是多个独立系统拼接，技术栈不统一，选 qiankun
• 如果你想快速接入，不想改太多代码，选 micro-app
• 如果你追求性能和开发体验，团队技术栈统一，选 Module Federation

我个人更推荐 Module Federation，因为它的设计理念更先进——不是把应用「拼」在一起，而是让应用之间可以「共享模块」。如果这还不算是微前端的未来方向，什么才是呢？