一、架构设计范式

1.1 技术选型依据

qiankun作为国内应用最广的微前端框架，其核心优势体现在：

多框架兼容：支持React/Vue/Angular等子应用共存

沙箱隔离：通过CSS样式隔离与JS沙箱避免全局污染

动态加载：按需加载子应用资源，首屏体积减少40%

1.2 典型架构模型

graph TD     A[主应用] -->|注册子应用| B(qiankun框架)     B --> C[Vue2子应用]     B --> D[React子应用]     B --> E[Angular子应用]     C -->|通信| F(状态总线)     D -->|通信| F     E -->|通信| F 

主应用通过registerMicroApps注册子应用配置，实现技术栈无关的模块集成。

二、子应用改造方案

2.1 入口文件改造

Vue子应用示例

// vue.config.js module.exports = {   outputDir: 'dist',   publicPath: process.env.NODE_ENV === 'production'     ? '//cdn.example.com/vue-subapp/'      : '/', }  // main.js import { bootstrap } from 'qiankun';  bootstrap({}); export async function mount(props) {   // 初始化逻辑 } export async function unmount() {   // 卸载清理 } 

需暴露bootstrap/mount/unmount生命周期钩子。

2.2 通信机制设计

2.2.1 全局状态共享

// 主应用初始化 import { initGlobalState } from 'qiankun'; const state = initGlobalState({ token: 'global-token' });  // 子应用监听 state.onGlobalStateChange((newState) => {   console.log('状态变更:', newState); }); state.setGlobalState({ cartCount: 5 }); 

通过initGlobalState实现跨应用数据同步。

2.2.2 自定义事件通信

// 主应用派发事件 window.dispatchEvent(new CustomEvent('cart-update', { detail: { count: 3 } }));  // 子应用监听 window.addEventListener('cart-update', (e) => {   updateCart(e.detail.count); }); 

适用于非状态数据的单向通知场景。

三、生产级部署策略

3.1 多环境配置

主应用路由配置

// registerMicroApps.js const env = process.env.NODE_ENV; registerMicroApps([   {     name: 'product-app',     entry: `${env === 'production' ? '//prod.cdn.com' : '//localhost:7100'}`,     activeRule: '/product'   } ]); 

区分开发/生产环境子应用入口。

3.2 安全防护方案

资源隔离：启用strictStyleIsolation防止样式冲突

沙箱强化：配置sandbox: { experimentalStyleIsolation: true }

HTTPS强制：所有子应用资源必须通过HTTPS加载

四、典型问题解决方案

4.1 路由冲突处理

// 主应用路由守卫 router.beforeEach((to) => {   if (window.__POWERED_BY_QIANKUN__) {     const subapp = getActiveSubapp();     if (subapp && subapp.matches(to.path)) {       return false;     }   }   return true; }); 

通过路由优先级机制避免主从应用冲突。

4.2 内存泄漏预防

// 子应用卸载清理 export async function unmount() {   // 清除定时器   clearInterval(timerId);      // 移除事件监听   window.removeEventListener('resize', handleResize);      // 释放第三方库   if (mapInstance) mapInstance.destroy(); } 

严格遵循生命周期规范进行资源释放。