qiankun 微前端落地实践

为什么选 qiankun

在大数据能力底座项目中，数据架构、数据开发、数据治理等模块由不同小组维护。单体应用导致：

• 构建慢、部署耦合
• 团队冲突率高
• 技术栈无法独立演进

改造步骤

1. 主应用注册

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'data-arch',
    entry: '//localhost:8081',
    container: '#sub-app',
    activeRule: '/data-arch'
  },
  {
    name: 'data-dev',
    entry: '//localhost:8082',
    container: '#sub-app',
    activeRule: '/data-dev'
  }
]);

start();

2. 子应用适配

// 子应用 main.js
export async function bootstrap() { /* ... */ }
export async function mount(props) { /* ... */ }
export async function unmount() { /* ... */ }

3. 通用能力下沉

• axios 拦截器：统一封装超时重试、错误处理
• 单点登录：一键配置，提升系统集成能力
• 搜索模块、表格操作栏：抽为公共组件

踩过的坑

问题	解决方案
样式隔离	严格使用 scoped CSS + CSS Modules
全局状态共享	通过 props 下发 + mitt 事件总线
资源公共路径	__webpack_public_path__ 动态设置
DolphinScheduler 节点扩展	自定义节点类型注册

效果

改造后各模块独立部署，团队并行开发效率显著提升，集成新模块的时间从天级降到小时级。