微前端实战：模块联邦与 qiankun 深度解析

引言

随着前端应用日益复杂，单体应用架构逐渐暴露出维护困难、部署耦合、技术栈受限等问题。微前端架构应运而生，它借鉴了后端微服务的思想，将大型应用拆分为多个独立开发、独立部署的子应用，通过组合形成完整的前端系统。

本文将深入探讨两种主流的微前端方案：模块联邦（Module Federation）和qiankun，并通过实战示例展示如何在实际项目中应用这些技术。

一、微前端核心概念

什么是微前端？

微前端是一种架构风格，其核心理念是：

独立开发：每个子应用由不同团队独立维护
独立部署：子应用可以单独发布，无需等待整体上线
技术栈无关：不同子应用可以使用不同的框架（React、Vue、Angular 等）
运行时集成：主应用在运行时动态加载子应用

微前端的优势

技术栈自由：团队可以根据项目需求选择合适的技术栈
独立部署：减少发布风险，提高迭代速度
渐进式重构：可以逐步迁移旧应用，无需推倒重来
团队自治：各团队拥有更大的自主权

二、方案一：模块联邦（Module Federation）

什么是模块联邦？

模块联邦是 Webpack 5 引入的新特性，它允许一个应用中的模块被另一个应用使用，实现跨应用的模块共享。

核心概念

Host：消费远程模块的应用
Remote：提供远程模块的应用
Shared：共享依赖（如 React、Vue）

配置示例

主应用（Host）配置：

java 复制代码

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

子应用（Remote）配置：

java 复制代码

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
        './Header': './src/Header',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

使用远程模块

javascript 复制代码

// 在主应用中导入远程模块
import React, { Suspense } from 'react';

// 动态导入远程组件
const RemoteButton = React.lazy(() => import('remoteApp/Button'));
const RemoteHeader = React.lazy(() => import('remoteApp/Header'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>加载中...</div>}>
        <RemoteHeader />
        <RemoteButton>点击我</RemoteButton>
      </Suspense>
    </div>
  );
}

模块联邦的优缺点

优点：

原生 Webpack 支持，无需额外框架
细粒度的模块共享
性能优化更好（按需加载）

缺点：

需要 Webpack 5+
跨域问题需要处理
状态管理较复杂

三、方案二：qiankun

什么是 qiankun？

qiankun 是蚂蚁金服开源的微前端框架，基于 single-spa 封装，提供了更完整的微前端解决方案。

核心特性

HTML Entry：通过 HTML 入口加载子应用
沙箱隔离：CSS 和 JS 隔离，避免冲突
应用通信：提供全局状态管理
路由管理：统一的路由配置

主应用配置

php 复制代码

// 安装 qiankun
// npm install qiankun

import { registerMicroApps, start, setDefaultRenderingEl } from 'qiankun';

// 注册子应用
registerMicroApps([
  {
    name: 'reactApp',
    entry: '//localhost:3001',
    container: '#container',
    activeRule: '/react',
    props: {
      // 传递给子应用的 props
      user: { name: '张三' },
    },
  },
  {
    name: 'vueApp',
    entry: '//localhost:3002',
    container: '#container',
    activeRule: '/vue',
  },
]);

// 设置默认渲染容器
setDefaultRenderingEl('div');

// 启动 qiankun
start({
  sandbox: true, // 开启沙箱隔离
  jsSandbox: true, // JS 沙箱
});

子应用配置

javascript 复制代码

// 子应用需要导出三个生命周期钩子
export async function bootstrap() {
  console.log('[vueApp] vue app bootstraped');
}

export async function mount(props) {
  console.log('[vueApp] props from main app', props);
  // 渲染应用
  render(props);
}

export async function unmount() {
  console.log('[vueApp] vue app unmounted');
  // 卸载应用
  unmount();
}

// 子应用入口文件
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

let instance = null;

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

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

应用间通信

javascript 复制代码

// 主应用设置全局状态
import { initGlobalState } from 'qiankun';

const actions = initGlobalState({
  user: null,
  theme: 'light',
});

// 主应用消费状态
actions.onGlobalStateChange((state, prev) => {
  console.log('state changed:', state, prev);
});

// 子应用消费状态
export async function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    console.log('子应用收到状态:', state);
  });
  
  // 子应用设置状态
  props.setGlobalState({
    user: { name: '李四' },
  });
}

qiankun 的优缺点

优点：

完整的微前端解决方案
优秀的沙箱隔离机制
丰富的文档和社区支持
支持多种框架

缺点：

基于 single-spa，有一定学习成本
性能开销相对较大
需要子应用改造

四、实战场景对比

场景一：渐进式重构

推荐方案：qiankun

当需要逐步迁移旧应用时，qiankun 的 HTML Entry 方式更加灵活，无需修改子应用的构建配置。

场景二：组件级共享

推荐方案：模块联邦

如果需要细粒度的组件共享，模块联邦更加合适，可以直接导入远程组件。

场景三：多技术栈混合

推荐方案：qiankun

当项目需要同时使用 React、Vue、Angular 等多种技术栈时，qiankun 的框架无关特性更加适合。

五、最佳实践

1. 统一技术栈

虽然微前端支持多技术栈，但建议在同一项目中尽量保持技术栈一致，降低维护成本。

2. 共享依赖管理

合理配置共享依赖，避免重复加载：

yaml 复制代码

// 主应用
shared: {
  react: {
    singleton: true,
    requiredVersion: '^18.0.0',
  },
  'react-dom': {
    singleton: true,
    requiredVersion: '^18.0.0',
  },
}

3. 路由设计

采用统一的路由前缀，便于管理：

css 复制代码

// 主应用路由
{
  path: '/main',
  component: MainLayout,
  children: [
    { path: 'react', component: () => import('qiankun/reactApp') },
    { path: 'vue', component: () => import('qiankun/vueApp') },
  ],
}

4. 样式隔离

使用 CSS Modules 或 styled-components 等方案，避免样式冲突：

css 复制代码

/* 子应用样式 */
.button {
  color: blue;
}

/* 使用 CSS Modules */
.button {
  color: blue;
}
/* 生成：.button_x8f9a { color: blue; } */

5. 错误处理

添加全局错误边界，提高应用稳定性：

javascript 复制代码

// 主应用错误处理
window.addEventListener('error', (e) => {
  console.error('全局错误:', e);
  // 上报错误监控
});

// qiankun 错误处理
start({
  sandbox: true,
  onError: (err) => {
    console.error('子应用加载失败:', err);
  },
});

六、性能优化

1. 预加载

在主应用空闲时预加载子应用：

javascript 复制代码

// 使用 qiankun 的预加载
import { preloadApps } from 'qiankun';

// 页面加载完成后预加载
window.addEventListener('load', () => {
  preloadApps(['reactApp', 'vueApp']);
});

2. 懒加载

只在路由匹配时加载子应用：

javascript 复制代码

// 路由懒加载
{
  path: '/react',
  component: () => import('./ReactApp'),
  loading: () => <div>加载中...</div>
}

3. 资源缓存

合理配置 HTTP 缓存，减少重复请求：

arduino 复制代码

// Nginx 配置
location ~* .(js|css|png|jpg|jpeg|gif|ico)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

七、常见问题与解决方案

问题 1：跨域问题

解决方案： 配置 CORS 或使用反向代理

bash 复制代码

# Nginx 反向代理
location /react-app/ {
  proxy_pass http://localhost:3001/;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}

问题 2：全局变量冲突

解决方案： 使用 qiankun 的 JS 沙箱

php 复制代码

start({
  sandbox: {
    strictStyleIsolation: true,
    experimentalStyleIsolation: true,
  },
});

问题 3：路由跳转问题

解决方案： 使用 Hash 路由或配置公共路由前缀

javascript 复制代码

// 子应用路由配置
const router = createBrowserRouter([
  {
    path: '/react/*', // 使用公共前缀
    element: <App />,
  },
]);

总结

微前端架构为大型前端项目提供了灵活的解决方案。选择模块联邦还是 qiankun，取决于具体需求：

模块联邦：适合组件级共享、Webpack 5+ 项目
qiankun：适合多技术栈、渐进式重构、需要完整解决方案的项目

无论选择哪种方案，都需要权衡利弊，根据项目实际情况做出选择。微前端不是银弹，它带来了灵活性的同时，也增加了系统复杂度和维护成本。

关键建议：

从小规模开始，逐步扩展
保持技术栈一致性
重视文档和沟通
建立完善的监控和错误处理机制

微前端架构的演进仍在继续，保持学习，持续优化，才能构建出真正高效、可维护的前端系统。