1.1 核心概念#

• Host (宿主)：消费其他远程模块的应用。
• Remote (远程)：暴露模块给其他应用消费的应用。
• Shared (共享)：双方共同使用的依赖（如 React, Lodash）。如果版本兼容，只下载一份；如果不兼容，各用各的。

1.2 2.0 版本的进化#

在 2026 年的今天，Module Federation 已经进化到了 2.0 (或类似 Rspack/Vite 的联邦实现)。

动态远程加载 (Dynamic Remotes)： 以前我们需要在 webpack.config.js 里写死远程地址。 现在，我们可以从接口动态获取远程应用的 manifest。

1
export const loadRemote = async (remoteName, remoteUrl) => {
2
  // 动态注入 Script 标签
3
  const script = document.createElement('script');
4
  script.src = remoteUrl;
5
  document.head.appendChild(script);
6
  // 等待初始化...
7
  await __webpack_init_sharing__('default');
8
  const container = window[remoteName];
9
  await container.init(__webpack_share_scopes__.default);
10
  return container;
11
};

这意味着，你可以在不重新部署 Host 的情况下，通过修改配置服务的 JSON，瞬间切换远程应用的指向（比如从 v1.0 切到 v1.1 做金丝雀发布）。

2.1 这里的微前端不再是“切页面”#

想象一个电商详情页：

• Header：来自 Team-Navigation (React)。
• 商品图片：来自 Team-Media (Vue)。
• 价格/库存：来自 Team-Core (Preact)。
• 评论区：来自 Team-Social (Svelte)。

它们在同一个页面上共存。通过 Module Federation，它们像原生组件一样被引入。

1
const ProductImage = React.lazy(() => import('mediaRemote/ProductImage'));
2
const Reviews = React.lazy(() => import('socialRemote/Reviews'));
3

4
function App() {
5
  return (
6
    <div>
7
      <Suspense fallback="Loading Image...">
8
        <ProductImage id="123" />
9
      </Suspense>
10
      <Suspense fallback="Loading Reviews...">
11
        <Reviews id="123" />
12
      </Suspense>
13
    </div>
14
  );
15
}

2.2 样式隔离 (CSS Isolation) 的终极方案#

微前端最大的坑就是 CSS 污染。 Shadow DOM？太重，且 React 事件代理有问题。 CSS Modules？需要构建工具配合。

2026 年的主流方案是：Tailwind CSS + Prefix / Scope。 或者使用 CSS-in-JS (Styled Components)，自动生成唯一哈希类名。 Module Federation 还可以配置 css: true，自动处理远程 CSS 的按需加载。

3.1 Custom Events#

浏览器原生的 CustomEvent 是最简单的解耦方案。

1
// Vue App 发送
2
window.dispatchEvent(new CustomEvent('product:added', { detail: { id: 1 } }));
3

4
// React App 监听
5
useEffect(() => {
6
  const handler = (e) => addToCart(e.detail);
7
  window.addEventListener('product:added', handler);
8
  return () => window.removeEventListener('product:added', handler);
9
}, []);

3.2 共享响应式对象 (RxJS / Signals)#

通过 Module Federation 共享一个 state-lib。这个库导出一个 RxJS Subject 或者 Preact Signals。 所有微应用都订阅这个信号。 这种方式比 EventBus 更可控，数据流向更清晰。