知识库

Appearance

Return to top
On this page

qiankun 微前端框架

什么是 qiankun？

qiankun 是一个基于 single-spa 的微前端实现库，它将微前端的开发理念转化为实际可用的工具。qiankun 旨在将一个大型的单体应用拆分成多个独立的小型应用，这些小型应用可以独立开发、测试、部署，同时又可以在主应用中无缝集成。

核心特性

1. 技术栈无关

  • 主框架零依赖，不强制使用特定技术栈
  • 微应用可以使用任意 JavaScript 框架开发
  • 支持嵌套子应用，支持不同技术栈的子应用

2. 简单易用

  • 仅需 3 步即可接入微应用
  • 提供丰富的 API 和配置选项
  • 开发体验接近原生应用

3. 完善的生命周期管理

  • 提供完整的应用生命周期钩子
  • 支持应用的加载、卸载、激活等状态管理
  • 自动处理应用间的切换

4. 样式隔离

  • 自动隔离微应用间的 CSS 样式
  • 防止样式冲突和污染
  • 支持沙箱机制

5. JS 沙箱

  • 提供 JS 沙箱机制，防止全局变量污染
  • 确保微应用间的隔离性
  • 支持多种沙箱模式

安装

通过 npm 安装

bash
npm install qiankun --save

通过 yarn 安装

bash
yarn add qiankun

基本使用

1. 主应用配置

主应用需要注册微应用并启动 qiankun：

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

// 注册微应用
registerMicroApps([
  {
    name: 'reactApp',
    entry: '//localhost:3001',
    container: '#subapp-viewport',
    activeRule: location => location.pathname.startsWith('/react'),
  },
  {
    name: 'vueApp',
    entry: '//localhost:3002',
    container: '#subapp-viewport',
    activeRule: location => location.pathname.startsWith('/vue'),
  },
]);

// 启动 qiankun
start();

2. 微应用配置

微应用需要导出生命周期函数：

javascript
// 微应用的入口文件
let instance = null;

// 应用加载前
export async function bootstrap(props) {
  console.log('react app bootstrap', props);
}

// 应用每次进入时
export async function mount(props) {
  console.log('react app mount', props);
  instance = new Vue({
    el: props.container ? props.container.querySelector('#app') : '#app',
    router,
    store,
    render: h => h(App),
  });
}

// 应用每次切出/卸载时
export async function unmount(props) {
  console.log('react app unmount', props);
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

高级特性

1. 应用间通信

qiankun 提供了多种通信方式：

javascript
// 主应用
import { initGlobalState } from 'qiankun';

const { onGlobalStateChange, setGlobalState } = initGlobalState({
  user: 'qiankun',
});

onGlobalStateChange((value, prev) => console.log(value, prev));

// 微应用中接收通信
export function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    console.log(state, prev);
  });
  
  props.setGlobalState({
    ignore: 'test',
    user: {
      name: 'sanmao',
    },
  });
}

2. 预加载策略

可以配置应用的预加载策略：

javascript
// 启动时配置预加载
start({
  prefetch: true, // 开启预加载
  // 或者自定义预加载逻辑
  prefetch: ['reactApp'],
  // 或者完全自定义
  prefetch: {
    criticalAppList: ['criticalApp'],
    idleAppList: ['idleApp'],
  }
});

3. 样式隔离

qiankun 提供了样式隔离功能：

javascript
// 启动时配置样式隔离
start({
  sandbox: {
    strictStyleIsolation: true, // 严格的样式隔离
  },
});

最佳实践

1. 路由配置

合理规划微应用的路由配置：

javascript
// 主应用路由配置
const routes = [
  {
    path: '/app1',
    component: () => import('@/views/App1.vue'),
  },
  {
    path: '/app2',
    component: () => import('@/views/App2.vue'),
  },
];

2. 资源加载优化

优化微应用的资源加载：

javascript
// 在微应用中使用懒加载
const LazyComponent = () => import('./components/LazyComponent.vue');

3. 错误处理

实现完善的错误处理机制：

javascript
// 主应用中捕获微应用错误
window.addEventListener('error', (e) => {
  console.error('Micro app error:', e);
});

window.addEventListener('unhandledrejection', (e) => {
  console.error('Micro app unhandled promise rejection:', e);
});

与其他微前端框架对比

特性qiankunsingle-spaMicro App
技术栈无关✅✅✅
样式隔离✅❌✅
JS 沙箱✅❌✅
学习成本低中低
社区支持活跃非常活跃新兴

常见问题

1. 样式冲突

  • 问题：微应用间样式相互影响
  • 解决：使用 strictStyleIsolation 配置

2. 全局变量污染

  • 问题：微应用污染全局变量
  • 解决：启用沙箱模式

3. 路由冲突

  • 问题：微应用路由与主应用冲突
  • 解决：合理规划路由规则

总结

qiankun 是一个功能强大且易于使用的微前端框架，它提供了技术栈无关、样式隔离、JS 沙箱等重要特性，帮助开发者轻松实现微前端架构。通过合理配置和使用，可以有效解决大型前端项目的复杂性问题。