微前端方案探索：qiankun

一、微前端架构与qiankun的价值

随着前端应用复杂度的指数级增长，传统单体架构逐渐暴露出维护成本高、技术栈固化、协作效率低等痛点。微前端架构借鉴后端微服务理念，将大型应用拆分为多个独立开发、独立部署的子应用，实现技术栈无关性、团队解耦和渐进式升级。

作为国内最流行的微前端框架之一，qiankun基于single-spa实现，提供了开箱即用的沙箱隔离、生命周期管理和通信机制。其核心优势在于：

技术栈无关：支持Vue、React、Angular等任意前端框架，甚至兼容jQuery等传统项目
无侵入式接入：子应用只需少量改造即可接入主应用，不影响原有开发模式
完善的隔离机制：通过JS沙箱和Shadow DOM实现运行时隔离，避免样式和全局变量冲突
灵活的通信方案：提供全局状态管理和事件总线两种通信模式，满足不同场景需求

二、qiankun核心架构与基础配置

2.1 主应用搭建

主应用作为微前端架构的基座，负责子应用的注册、加载和生命周期管理。搭建主应用只需三个核心步骤：

创建容器组件：在主应用中定义子应用的渲染容器，通常是一个带有唯一ID的DOM节点

html 复制代码

<!-- 主应用模板 -->
<div id="subapp-container"></div>

注册子应用：通过registerMicroApps方法注册子应用，配置应用名称、入口地址、激活规则等信息

jsx 复制代码

const microApps = [
  {
    name: 'app-vue',
    entry: import.meta.env.VITE_SUB_VUE_ENTRY,  // ⭐ 使用环境变量
    container: '#subapp-container',
    activeRule: '/app-vue',
    props: {
      // 父 -> 子
      getUser: () => userStore.user,
      // 子 -> 父
      sendToMain: (content) => {
        messageStore.add({ content, from: 'Vue子应用' })
      }
      // 子 -> 子：通过 qiankun 的 onGlobalStateChange 和 setGlobalState
      // 这两个方法会自动注入到 props 中
    }
  },
  {
    name: 'app-react',
    entry: import.meta.env.VITE_SUB_REACT_ENTRY,  // ⭐ 使用环境变量
    container: '#subapp-container',
    activeRule: '/app-react',
    props: {
      getUser: () => userStore.user,
      sendToMain: (content) => {
        messageStore.add({ content, from: 'React子应用' })
      }
    }
  }
]
import { registerMicroApps, start } from 'qiankun';

registerMicroApps(microApps);

启动qiankun：在主应用初始化完成后调用start()方法启动微前端框架

js 复制代码

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

2.2 子应用改造

子应用需要暴露生命周期钩子函数，供主应用调用。不同技术栈的子应用改造方式略有差异，但核心原理一致：

配置打包工具：修改webpack配置，支持umd格式输出

js 复制代码

// vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      library: 'vue-app',
      libraryTarget: 'umd'
    }
  }
};

暴露生命周期：在子应用入口文件中导出bootstrap、mount、unmount三个核心函数

js 复制代码

// 子应用入口文件
let instance = null;

function render(props) {
  const { container } = props;
  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app');
}

export async function bootstrap() {
  console.log('vue app bootstraped');
}

export async function mount(props) {
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance = null;
}

三、核心技术挑战与解决方案

3.1 资源隔离与冲突解决

在多子应用场景中，样式污染和全局变量冲突是最常见的问题。qiankun提供了多层次的解决方案：

严格样式隔离：通过开启strictStyleIsolation选项，利用Shadow DOM实现样式隔离

js 复制代码

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

CSS Modules化：要求子应用采用CSS Modules或CSS-in-JS方案，从源头避免全局选择器

css 复制代码

/* 子应用样式文件 */
.container {
  background-color: #fff;
}

动态前缀添加：通过postcss-prefix-selector插件为子应用样式添加唯一前缀

js 复制代码

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-prefix-selector')({
      prefix: '[data-vue-app]',
      includeFiles: [/vue-app/],
      transform(prefix, selector) {
        return `${prefix} ${selector}`;
      }
    })
  ]
};

3.2 跨应用通信与状态管理

qiankun提供两种主要通信模式，满足不同场景需求：

全局状态管理：基于发布-订阅模式实现跨应用状态共享

jsx 复制代码

// 主应用初始化全局状态
import { initGlobalState } from 'qiankun';

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

// 主应用监听状态变化
actions.onGlobalStateChange((state, prev) => {
  console.log('主应用状态变更:', state, prev);
});

// 子应用使用全局状态
export async function mount(props) {
  // 监听状态变化
  props.onGlobalStateChange((state) => {
    console.log('子应用收到状态:', state);
  });
  
  // 修改全局状态
  props.setGlobalState({ theme: 'dark' });
}

事件总线模式：通过自定义EventEmitter实现松散耦合的通信

js 复制代码

// 主应用创建事件总线
class EventBus {
  constructor() {
    this.events = {};
  }
  
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }
  
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }
}

window.eventBus = new EventBus();

// 子应用使用事件总线
window.eventBus.emit('user-login', { name: 'admin' });
window.eventBus.on('user-logout', () => {
  console.log('用户已退出');
});

3.3 性能优化策略

在大规模微前端应用中，性能优化至关重要。以下是经过验证的优化方案：

预加载机制：通过prefetch配置实现子应用资源预加载

js 复制代码

start({
  prefetch: true
});

公共依赖共享：主应用通过externals配置提供公共依赖，子应用无需重复打包

// 主应用webpack配置 module.exports = { externals: { 'vue': 'Vue', 'vue-router': 'VueRouter' } };

懒加载路由：子应用采用路由懒加载，减少初始加载体积

js 复制代码

// 子应用路由配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
];

四、部署与监控实践

4.1 部署方案

qiankun支持多种部署模式，常见的有以下两种：

独立部署模式：每个子应用独立部署到不同域名或路径，主应用通过CDN或反向代理访问子应用

shell 复制代码

# Nginx配置
server {
  listen 80;
  server_name main-app.com;
  
  location /vue-app {
    proxy_pass http://vue-app.com;
  }
  
  location /react-app {
    proxy_pass http://react-app.com;
  }
}

统一部署模式：所有子应用打包后部署到主应用的静态资源目录，通过相对路径访问（一般都是这样的配置）

js 复制代码

// 主应用注册配置
registerMicroApps([
  {
    name: 'vue-app',
    entry: '/static/vue-app/index.html',
    container: '#subapp-container',
    activeRule: '/vue-app'
  }
]);

4.2 错误监控

通过errorHandler统一处理子应用错误

js 复制代码

start({
  errorHandler: (err) => {
    console.error('子应用错误:', err);
    // 上报到监控系统
    reportError(err);
  }
});

五、常见问题与解决方案

子应用路由冲突：子应用采用history模式时，需要配置base路径

js 复制代码

// vue子应用路由配置
const router = new VueRouter({
  mode: 'history',
  base: '/vue-app/',
  routes
});

第三方库冲突：通过singular配置避免重复加载第三方库

js 复制代码

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

六、演示

GitHub地址：github.com/beat-the-bu...