知识库

Appearance

Return to top
On this page

qiankun 与其他微前端框架对比

微前端框架概览

微前端是一种将复杂前端应用拆分为更小、更易管理的部分的架构方法。目前主流的微前端框架包括 qiankun、single-spa、Micro App、Module Federation 等。

qiankun vs single-spa

架构关系

qiankun 基于 single-spa 构建，提供了更高级的抽象和开箱即用的功能：

javascript
// single-spa 基础注册
const app = registerApplication({
  name: 'app1',
  app: () => System.import('app1'),
  activeWhen: location => location.pathname.startsWith('/app1'),
  customProps: {}
});

// qiankun 简化注册
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:3001',
    container: '#container',
    activeRule: '/app1'
  }
]);

功能对比

特性qiankunsingle-spa
技术栈无关✅✅
样式隔离✅❌
JS 沙箱✅❌
预加载✅❌
通信机制✅需要额外实现
开发体验优秀一般

实现复杂度

single-spa 实现

javascript
// single-spa 需要手动处理更多细节
const application = {
  name: 'react-app',
  app: () => import('./src/main.js'), // 需要特殊配置
  activeWhen: ['/app1'],
  customProps: {
    domElement: document.getElementById('react-app'),
  },
};

registerApplication(application);

// 需要手动处理生命周期
const lifecycles = {
  bootstrap: [bootstrapFn],
  mount: [mountFn],
  unmount: [unmountFn],
};

qiankun 实现

javascript
// qiankun 简化实现
registerMicroApps([
  {
    name: 'react-app',
    entry: '//localhost:3001',
    container: '#subapp-container',
    activeRule: '/app1',
  }
]);

start({
  sandbox: true,
  prefetch: true
});

qiankun vs Micro App

核心理念对比

qiankun

  • 基于 single-spa，生态成熟
  • 提供完整的沙箱和样式隔离
  • 社区支持广泛

Micro App

  • 基于 Web Components 标准
  • 更接近原生实现
  • 体积更小

功能实现对比

javascript
// qiankun 实现
// 主应用
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:3001',
    container: '#container',
    activeRule: '/app1'
  }
]);

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

// 微应用
export async function mount(props) {
  // qiankun 提供的挂载生命周期
}
javascript
// Micro App 实现
// 主应用
import { defineApp } from '@micro-zoe/micro-app';

defineApp({
  name: 'app1',
  url: '//localhost:3001',
});

// 使用方式
<micro-app name="app1" url="//localhost:3001"></micro-app>

沙箱机制对比

qiankun 沙箱

javascript
// qiankun 提供多种沙箱选项
start({
  sandbox: {
    // 代理沙箱（默认）
    type: 'legacy',
    // 严格样式隔离
    strictStyleIsolation: true,
    // 实验性样式隔离
    experimentalStyleIsolation: true,
  }
});

Micro App 沙箱

javascript
// Micro App 基于 Shadow DOM
// 天然的样式和脚本隔离

qiankun vs Module Federation

架构差异

Module Federation

  • Webpack 5 原生支持
  • 构建时决定依赖关系
  • 更适合同构应用

qiankun

  • 运行时加载微应用
  • 支持不同技术栈
  • 更适合异构应用

实现方式对比

Module Federation 实现

javascript
// webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        'remote-app': 'remote@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

// 使用远程组件
const RemoteComponent = React.lazy(() => 
  import('remote-app/Component')
);

qiankun 实现

javascript
// 完全独立的微应用
registerMicroApps([
  {
    name: 'remote-app',
    entry: '//localhost:3001',
    container: '#container',
    activeRule: '/remote'
  }
]);

适用场景对比

方面Module Federationqiankun
技术栈统一✅❌
构建时优化✅❌
运行时隔离❌✅
独立部署❌✅
样式隔离❌✅
JS 沙箱❌✅

qiankun vs Wujie

技术路线

Wujie（无界）

  • 基于 Web Workers 和 iframe
  • 更强的隔离性
  • 性能优化

qiankun

  • 基于 Proxy 沙箱
  • 成熟的生态
  • 丰富的功能

隔离机制对比

javascript
// qiankun 隔离
start({
  sandbox: {
    strictStyleIsolation: true
  }
});

// 微应用生命周期
export async function mount(props) {
  // 在沙箱环境中运行
}
javascript
// Wujie 隔离（概念示例）
import { createApp } from 'wujie';

createApp({
  name: 'app1',
  url: '//localhost:3001',
  el: '#container',
  // iframe 隔离
  attrs: { sandbox: 'allow-same-origin allow-scripts' }
});

性能对比

加载性能

qiankun

javascript
// 支持预加载
start({
  prefetch: {
    criticalAppList: [
      { name: 'criticalApp', entry: '//localhost:3001' }
    ],
    idleAppList: [
      { name: 'idleApp', entry: '//localhost:3002' }
    ],
  }
});

各框架加载时间对比

  • qiankun：首次加载较慢，后续加载快（有缓存）
  • Micro App：加载速度中等，基于原生特性
  • Module Federation：构建时优化，运行时快
  • single-spa：需要额外配置，加载速度一般

内存占用

javascript
// qiankun 内存管理
export async function unmount(props) {
  // qiankun 提供完整的卸载机制
  // 自动清理沙箱和事件监听器
}

生态和社区对比

GitHub 活跃度对比

框架Stars最近更新生态丰富度
qiankun高频繁丰富
single-spa中频繁中等
Micro App中频繁中等
Module Federation高频繁依赖 Webpack

学习曲线

qiankun

javascript
// 学习曲线：中等
// 需要理解沙箱、样式隔离等概念
// 文档完善，社区支持好

// 基础使用简单
registerMicroApps([...]);
start();

single-spa

javascript
// 学习曲线：陡峭
// 需要理解更多底层概念
// 配置复杂度高

Micro App

javascript
// 学习曲线：平缓
// 基于 Web Components，概念简单
// 使用方式类似自定义元素

企业级特性对比

权限管理

qiankun 权限集成

javascript
// 主应用权限控制
const hasPermission = (app) => {
  return userPermissions.includes(app.permission);
};

const filteredApps = apps.filter(app => hasPermission(app));

registerMicroApps(filteredApps);

监控和错误处理

qiankun 错误处理

javascript
// qiankun 提供完整的错误处理机制
start({
  error: (error, app) => {
    // 统一错误处理
    console.error('Micro app error:', error, app);
    // 错误上报
    reportError(error, app);
  }
});

// 微应用内错误捕获
export async function mount(props) {
  try {
    // 应用挂载逻辑
  } catch (error) {
    // 微应用级别错误处理
    if (props.onError) {
      props.onError(error);
    }
  }
}

选择建议

选择 qiankun 的场景

  1. 技术栈多样化：需要集成不同技术栈的应用
javascript
// Vue 主应用集成 React、Angular 微应用
registerMicroApps([
  { name: 'react-app', entry: '//react-app:3000', container: '#react-container' },
  { name: 'angular-app', entry: '//angular-app:4200', container: '#angular-container' }
]);
  1. 需要强隔离：对样式和 JS 隔离要求高
javascript
start({
  sandbox: {
    strictStyleIsolation: true,
    experimentalStyleIsolation: true
  }
});
  1. 成熟的生态：需要丰富的插件和工具支持

其他框架更适合的场景

Module Federation 适合

  • 同构应用（都使用 Webpack 构建）
  • 需要构建时优化
  • 团队熟悉 Webpack 配置

Micro App 适合

  • 追求原生标准
  • 需要轻量级方案
  • 对 Web Components 熟悉

single-spa 适合

  • 需要最大灵活性
  • 有自定义需求
  • 预算有限制

迁移路径

从 single-spa 迁移

javascript
// single-spa 实现
registerApplication({
  name: 'app1',
  app: () => System.import('app1'),
  activeWhen: ['/app1']
});

// 迁移到 qiankun
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:3001', // 更简单的入口配置
    container: '#container',
    activeRule: '/app1'
  }
]);

从其他框架迁移考虑因素

  • 当前技术栈兼容性
  • 团队学习成本
  • 项目复杂度
  • 长期维护成本
  • 社区支持程度

通过以上对比，可以看出 qiankun 在提供完整功能的同时，保持了相对简单的 API，是大多数微前端场景的不错选择。