微前端框架QianKun

以下是关于 QianKun微前端框架 的系统知识梳理，涵盖核心概念、核心功能、应用间通信、性能优化等内容：

一、QianKun基础概念与核心功能

1. 微前端概念

   • 定义：将单体前端应用拆分为多个独立开发、部署的子应用，通过主应用统一集成。
   • 优势：技术栈无关、独立部署、团队自治、增量升级。
   • 常见场景：大型企业级应用、多团队协作项目、遗留系统迁移。

2. QianKun简介

   • 背景：由阿里巴巴开源，基于Single-SPA的微前端解决方案。
   • 核心功能：
     • 应用加载：动态注册和加载子应用。
     • JS沙箱：隔离子应用JavaScript执行环境。
     • 样式隔离：防止子应用CSS污染全局。
     • 资源预加载：提升子应用加载性能。
     • 通信机制：支持主子应用间数据传递。

3. QianKun vs 其他框架

   • Single-SPA：QianKun在其基础上增强沙箱、样式隔离等能力。
   • Module Federation：Webpack原生方案，适合同技术栈；QianKun更适合多技术栈混合。

二、QianKun的安装与配置

1. 主应用配置

   • 安装依赖：

     npm install qiankun
     

   • 初始化QianKun：

     import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'subApp', // 子应用名称entry: '//localhost:7100', // 子应用入口container: '#subapp-container', // 挂载容器activeRule: '/subapp', // 激活路由},
     ]);start(); // 启动QianKun
     

2. 子应用适配

   • 导出生命周期钩子：

     export async function bootstrap() {console.log('子应用启动');
     }export async function mount(props)