以下是关于 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) {
       ReactDOM.render(<App />, props.container.querySelector('#root'));
     }
     
     export async function unmount(props) {
       ReactDOM.unmountComponentAtNode(props.container.querySelector('#root'));
     }
     

   • 配置Webpack（开发环境）：

     module.exports = {
       devServer: {
         headers: {
           'Access-Control-Allow-Origin': '*', // 允许跨域
         },
       },
       output: {
         library: `${packageName}-[name]`,
         libraryTarget: 'umd',
         jsonpFunction: `webpackJsonp_${packageName}`,
       },
     };
     

3. 路由配置

   • 主应用路由：监听URL变化，匹配子应用激活规则。
   • 子应用路由：使用<BrowserRouter>或<MemoryRouter>，避免与主应用路由冲突。

三、QianKun核心机制解析

1. JS沙箱（Sandbox）

   • 快照沙箱：
     • 原理：在子应用加载前保存全局状态，卸载时恢复。
     • 适用场景：兼容性要求高（如IE11）。
   • 代理沙箱（Proxy）：
     • 原理：通过ES6 Proxy代理全局对象（如window），隔离子应用环境。
     • 优势：支持多实例并行运行。
   • 配置沙箱模式：

     start({ sandbox: { strictStyleIsolation: true } }); // 严格样式隔离
     

2. 样式隔离

   • 动态样式表：子应用加载时添加样式，卸载时移除。
   • Shadow DOM：通过strictStyleIsolation启用，彻底隔离样式。
   • 注意事项：
     • 避免使用!important。
     • 全局样式（如字体）需在主应用加载。

3. 资源加载与执行

   • HTML Entry：解析子应用入口HTML，动态加载JS/CSS。
   • 预加载策略：

     start({ prefetch: 'all' }); // 预加载所有子应用资源
     

四、应用间通信

1. Props传递

   • 主应用传递数据：

     registerMicroApps([
       {
         // ...
         props: { user: 'Alice' }, // 传递props
       },
     ]);
     

   • 子应用接收数据：

     export async function mount(props) {
       console.log(props.user); // 'Alice'
     }
     

2. 全局状态管理

   • 使用Redux/Vuex：主应用与子应用共享同一个Store。
   • QianKun的initGlobalState：

     import { initGlobalState } from 'qiankun';
     
     const actions = initGlobalState({ user: null });
     
     // 主应用更新状态
     actions.setGlobalState({ user: 'Bob' });
     
     // 子应用监听状态变化
     actions.onGlobalStateChange((state) => {
       console.log(state.user);
     });
     

3. 自定义事件

   • 子应用触发事件：

     window.dispatchEvent(new CustomEvent('subapp-event', { detail: data }));
     

   • 主应用监听事件：

     window.addEventListener('subapp-event', (e) => {
       console.log(e.detail);
     });
     

五、性能优化与最佳实践

1. 子应用拆分与懒加载

   • 按需加载：根据路由动态加载子应用。
   • 预加载策略：

     start({
       prefetch: (apps) => apps.filter(app => app.activeRule === '/important'),
     });
     

2. 公共依赖共享

   • Webpack的externals：

     externals: {
       react: 'React',
       'react-dom': 'ReactDOM',
     },
     

   • Module Federation共享（结合Webpack 5）：

     new ModuleFederationPlugin({
       shared: ['react', 'react-dom'],
     });
     

3. 错误处理与监控

   • 全局错误捕获：

     import { addErrorHandler } from 'qiankun';
     
     addErrorHandler((error) => {
       console.error('子应用错误:', error);
     });
     

   • 性能监控：集成Sentry、Performance API监控子应用性能。

六、调试与常见问题解决

1. 调试技巧

   • 查看沙箱环境：通过window.__SANDBOX__访问代理对象。
   • 检查资源加载：使用浏览器Network面板查看子应用资源请求。

2. 常见问题与解决

   • 子应用加载失败：
     • 检查跨域配置（CORS）。
     • 确保子应用入口正确（entry配置）。
   • 样式未隔离：
     • 启用strictStyleIsolation或experimentalStyleIsolation。
   • 通信失败：
     • 确保使用相同的通信方式（如全局状态或事件）。
     • 检查子应用生命周期是否正确导出。

七、总结

通过以上系统学习，我们将掌握QianKun的核心机制、配置方法、通信策略及优化技巧，能够独立设计和实现基于QianKun的微前端架构。实际开发中，建议结合具体业务需求，逐步实践并积累经验，以应对复杂场景下的挑战。