Qiankun

Qiankun 的核心概念

1. 基于 Single-SPA：

   • Qiankun 继承了 Single-SPA 的核心理念和机制，通过提供一系列封装和增强功能，使其更加易于使用和集成。

2. 应用注册和生命周期管理：

   • Qiankun 通过简单的 API 来注册子应用，管理其加载、挂载和卸载的生命周期。

3. 沙箱机制：

   • Qiankun 提供了独立的沙箱环境，保证子应用之间的样式和全局变量不会互相污染。

4. 预加载机制：

   • Qiankun 支持在子应用实际被激活之前进行预加载，提高了应用切换时的响应速度。

Qiankun 的主要特点

1. 简单易用：

   • 通过简洁的 API 和配置，开发者可以快速将现有项目改造成微前端架构。

2. 框架无关：

   • 支持主流的前端框架，如 React、Vue、Angular 等，甚至可以混合使用不同框架构建子应用。

3. 高性能：

   • 提供预加载和沙箱等性能优化机制，确保应用在高效运行的同时，具有良好的隔离性。

4. 灵活扩展：

   • 支持自定义加载策略、样式隔离方案等，可以根据实际需求进行灵活配置。

Qiankun 的基本使用

安装

要使用 Qiankun，可以通过 npm 或 yarn 安装：

npm install qiankun
# 或者
yarn add qiankun

主应用配置

在主应用中，需要配置 Qiankun 并注册子应用：

import { registerMicroApps, start } from 'qiankun';

// 注册子应用
registerMicroApps([
  {
    name: 'app1', // 子应用名称
    entry: '//localhost:7100', // 子应用入口
    container: '#container', // 子应用挂载的容器
    activeRule: '/app1', // 激活规则
  },
  {
    name: 'app2',
    entry: '//localhost:7200',
    container: '#container',
    activeRule: '/app2',
  },
]);

// 启动 qiankun
start();

子应用配置

在子应用中，需要导出生命周期函数，这些函数将由主应用调用：

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

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

export async function unmount() {
  console.log('子应用 unmount');
}

样式隔离

Qiankun 提供了多种样式隔离方案，可以通过配置来选择合适的方案：

import { start } from 'qiankun';

// 启动 qiankun 并启用样式隔离
start({
  sandbox: { strictStyleIsolation: true }, // 使用严格样式隔离
});

预加载

Qiankun 支持在子应用被激活之前进行预加载，提高切换时的响应速度：

import { start } from 'qiankun';

// 启动 qiankun 并启用预加载
start({
  prefetch: true, // 启用预加载
});

高级功能

1. 跨应用通信：

   • Qiankun 提供了基于自定义事件的跨应用通信机制，可以通过 qiankun 提供的 API 实现不同子应用之间的数据传递。

2. 自定义加载策略：

   • 通过配置 loadMicroApp，可以自定义子应用的加载策略，例如按需加载、延迟加载等。

3. 应用卸载和重用：

   • Qiankun 支持应用的动态卸载和重用，通过配置可以控制子应用的缓存策略，优化内存使用。

示例项目和资源

1. 示例项目：

   • Qiankun 官方仓库提供了多个示例项目，展示了如何在不同场景下使用 Qiankun 构建微前端应用：Qiankun 示例项目

2. 官方文档：

   • Qiankun 的官方文档详细介绍了框架的使用方法和 API 参考：Qiankun 官方文档

3. 社区和支持：

   • Qiankun 拥有活跃的社区支持，开发者可以通过 GitHub Issues 提问，或者参与讨论：Qiankun GitHub 仓库