微前端 2026：从 Module Federation 到 Bun bundler 的现代方案完整指南

一句话结论：微前端 = 独立开发 + 独立部署 + 独立运行。2026 年大型应用架构标配。本文从 0 到微前端完整实战。

背景

2026 年前端架构演进：

单体前端（2015-2020）：
- 一个仓库
- 一个框架
- 一次部署
- Bundle 越来越大

微前端（2024+）：
- 多仓库
- 多框架共存
- 独立部署
- 按需加载

为什么 2026 年微前端爆发：

1. 应用变大：SaaS / 电商 / 中台
2. 团队分散：多团队协作
3. 技术异构：新老系统共存
4. 独立部署：减少冲突
5. 独立升级：技术栈迁移

6 大方案对比

方案	类型	协议	性能	学习曲线	适用
Module Federation 2.0	运行时	共享模块	⭐⭐⭐⭐⭐	中	大型
qiankun	运行时	注册中心	⭐⭐⭐	中	阿里系
micro-app	运行时	Web Components	⭐⭐⭐⭐	低	京东系
wujie	运行时	Web Components	⭐⭐⭐⭐	低	腾讯系
Astro Islands	构建时	多框架混合	⭐⭐⭐⭐⭐	低	营销 / 内容站
Vite + 插件	构建时	自定义	⭐⭐⭐⭐	中	中型

1. Module Federation 2.0

优势：

• ✅ Webpack 5 / Vite 原生支持
• ✅ 运行时共享依赖（不重复打包）
• ✅ 独立部署 + 热更新
• ✅ 双向通信

限制：

• ❌ 配置复杂
• ❌ 调试难

2. qiankun

优势：

• ✅ 基于 single-spa
• ✅ 阿里大规模生产验证
• ✅ JS 沙箱 + CSS 隔离

限制：

• ❌ 不支持 Vite 原生（需用 vite-plugin-qiankun）

3. micro-app（京东）

优势：

• ✅ 基于 Web Components
• ✅ 类 Vue 组件用法
• ✅ 零侵入

限制：

• ❌ 生态较小

4. wujie（腾讯）

优势：

• ✅ 基于 Web Components + iframe
• ✅ 完美沙箱
• ✅ 预加载

限制：

• ❌ iframe 性能开销

5. Astro Islands

优势：

• ✅ 多框架混合（React + Vue + Svelte）
• ✅ 极简配置
• ✅ 极强性能（零 JS 默认）

限制：

• ❌ 不适合交互密集型应用

选型决策树

应用类型？
├── 大型 SaaS / 中台 → Module Federation 2.0
├── 阿里系业务 → qiankun
├── 京东系业务 → micro-app
├── 腾讯系业务 → wujie
└── 营销 / 内容站 → Astro Islands

4 个实战项目

项目 1：Module Federation 2.0 + Vite

// 主应用 host/vite.config.ts
import { defineConfig } from "vite";
import federation from "@module-federation/vite";

export default defineConfig({
  plugins: [
    federation({
      name: "host",
      remotes: {
        product: {
          type: "module",
          name: "product",
          entry: "https://product.example.com/remoteEntry.js",
        },
        cart: {
          type: "module",
          name: "cart",
          entry: "https://cart.example.com/remoteEntry.js",
        },
      },
      shared: {
        react: { singleton: true, requiredVersion: "^19.0.0" },
        "react-dom": { singleton: true, requiredVersion: "^19.0.0" },
      },
    }),
  ],
});

// 主应用 host/src/App.tsx
import { lazy, Suspense } from "react";

const ProductApp = lazy(() => import("product/App"));
const CartApp = lazy(() => import("cart/App"));

export default function App() {
  return (
    <div>
      <h1>主应用</h1>
      <Suspense fallback={<div>Loading Product...</div>}>
        <ProductApp />
      </Suspense>
      <Suspense fallback={<div>Loading Cart...</div>}>
        <CartApp />
      </Suspense>
    </div>
  );
}

// 子应用 product/vite.config.ts
import { defineConfig } from "vite";
import federation from "@module-federation/vite";

export default defineConfig({
  plugins: [
    federation({
      name: "product",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App.tsx",
        "./ProductList": "./src/ProductList.tsx",
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
  build: {
    target: "esnext",
    minify: false,
    cssCodeSplit: true,
  },
});

项目 2：qiankun 微前端

// 主应用 main/src/registerApps.ts
import { registerMicroApps, start } from "qiankun";

registerMicroApps([
  {
    name: "product-app",
    entry: "//localhost:7101",
    container: "#subapp-product",
    activeRule: "/product",
  },
  {
    name: "cart-app",
    entry: "//localhost:7102",
    container: "#subapp-cart",
    activeRule: "/cart",
  },
  {
    name: "user-app",
    entry: "//localhost:7103",
    container: "#subapp-user",
    activeRule: "/user",
  },
]);

start({
  prefetch: "all",  // 预加载
  sandbox: {
    strictStyleIsolation: true,  // 严格样式隔离
  },
});

// 子应用 product/src/public-path.ts
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line
  // @ts-ignore
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// 子应用 product/src/main.ts
import "./public-path";
import { createApp } from "vue";
import App from "./App.vue";

let instance: any = null;

function render(props: any) {
  const { container } = props;
  instance = createApp(App).mount(container ? container.querySelector("#app") : "#app");
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap() {
  console.log("[product] bootstraped");
}

export async function mount(props: any) {
  console.log("[product] mount", props);
  render(props);
}

export async function unmount() {
  console.log("[product] unmount");
  instance?.unmount();
}

项目 3：micro-app（京东）

// 主应用 main/src/App.tsx
import MicroApp from "@micro-zoe/micro-app";

export default function App() {
  return (
    <div>
      <h1>主应用</h1>
      
      {/* 路由 /product 加载 product 子应用 */}
      <MicroApp 
        name="product"
        url="http://localhost:7101/"
        baseroute="/product"
      />
      
      <MicroApp 
        name="cart"
        url="http://localhost:7102/"
        baseroute="/cart"
      />
    </div>
  );
}

// 子应用 product/src/App.tsx
// 子应用无需任何改造，零侵入！
export default function App() {
  return (
    <div>
      <h1>Product 子应用</h1>
      <p>这里是商品列表</p>
    </div>
  );
}

项目 4：Astro Islands 多框架

---
// src/pages/index.astro
import ProductList from "../components/ProductList.tsx";  // React
import VueCounter from "../components/Counter.vue";  // Vue
import SvelteWidget from "../components/Widget.svelte";  // Svelte
---

<html>
<body>
  <h1>多框架混合</h1>
  
  <!-- 默认零 JS，按需水合 -->
  <ProductList client:visible />
  
  <VueCounter client:idle />
  
  <SvelteWidget client:load />
</body>
</html>

// src/components/ProductList.tsx（React）
import { useState } from "react";

export default function ProductList() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h2>React 组件</h2>
      <button onClick={() => setCount(count + 1)}>
        点击 {count}
      </button>
    </div>
  );
}

<!-- src/components/Counter.vue（Vue）-->
<template>
  <div>
    <h2>Vue 组件</h2>
    <button @click="count++">点击 {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

5 个常见坑

坑 1：样式冲突

❌ 子应用样式污染主应用
✅ CSS Modules / Shadow DOM / 命名空间

坑 2：JS 沙箱失效

❌ 全局变量污染
✅ qiankun 沙箱 / iframe 隔离

坑 3：重复打包

❌ 每个子应用打包 React / Vue
✅ Module Federation shared

坑 4：路由冲突

❌ 多子应用共用同一路由
✅ activeRule + baseroute 隔离

坑 5：状态共享难

❌ Redux / Pinia 重复
✅ 全局 EventBus / CustomEvent

// 主应用 globalState.ts
class GlobalState {
  private state = new Map<string, any>();
  private events = new Map<string, Function[]>();

  set(key: string, value: any) {
    this.state.set(key, value);
    this.emit(key, value);
  }

  get(key: string): any {
    return this.state.get(key);
  }

  on(key: string, callback: Function) {
    if (!this.events.has(key)) {
      this.events.set(key, []);
    }
    this.events.get(key)!.push(callback);
  }

  emit(key: string, value: any) {
    this.events.get(key)?.forEach(cb => cb(value));
  }
}

export const globalState = new GlobalState();

// 子应用使用
globalState.on("user", (user) => {
  console.log("User changed:", user);
});

globalState.set("user", { id: 1, name: "Alice" });

与之前内容的关系

7/16 TypeScript           → 前端基础
7/22 React 19 RSC         → 单应用框架
7/30 shadcn/ui            → UI 库
7/31 Web 性能              → 性能
8/7  Next.js SEO + GEO    → SEO
8/13 微前端               → 大型应用架构  ← 今天
→ "基础 → 框架 → UI → 性能 → SEO → 架构"完整闭环

7 天落地路径

Day 1：选型

基于团队规模 + 技术栈选型

Day 2：拆分应用

按业务领域拆分（product / cart / user）

Day 3：主应用配置

// host 配置 + 路由

Day 4：子应用改造

// 子应用独立仓库

Day 5：联调

跨应用通信 + 状态共享

Day 6：样式隔离

CSS Modules + Shadow DOM

Day 7：部署

独立部署 + CDN + 监控

我的看法

微前端是 2026 年大型前端应用的标准架构：

1. 业务变大：必然选择
2. 团队分散：提升效率
3. 技术异构：新老共存
4. 独立部署：减少冲突
5. 生态成熟：方案丰富

对独立开发者的建议：

• 小项目：不需要微前端
• 中型项目：单应用 + 模块化
• 大型项目：Module Federation 2.0
• 营销站：Astro Islands
• 团队协作：qiankun / micro-app

参考

• Module Federation 2.0
• qiankun
• micro-app
• wujie
• Astro Islands
• TypeScript（7/16）
• React 19（7/22）
• shadcn/ui（7/30）
• Web 性能（7/31）
• Next.js SEO（8/7）

---

本文基于微前端 2026 年新方案，2026 年 8 月最新实战。