qiankun 两种加载模式对比分析

概述

qiankun 提供了两种加载子应用的方式：

1. registerMicroApps + start 模式：声明式，由 qiankun 自动管理子应用生命周期
2. loadMicroApp 模式：命令式，由开发者手动控制子应用加载/卸载

本文将深入分析两种模式的技术区别、适用场景、可能遇到的问题及解决方案。

---

一、技术原理对比

1.1 registerMicroApps + start 模式

import { registerMicroApps, start } from "qiankun";

// 注册子应用
registerMicroApps([
  {
    name: "sub-app-1",
    entry: "//localhost:3000",
    container: "#sub-app-container",
    activeRule: "/sub-app-1",
  },
]);

// 启动 qiankun
start();

工作原理：

• start() 会启动 qiankun 的路由监听（基于 single-spa）
• qiankun 监听 popstate 和 hashchange 事件
• 当 URL 匹配 activeRule 时，自动加载对应子应用
• 当 URL 不再匹配时，自动卸载子应用

1.2 loadMicroApp 模式

import { loadMicroApp } from "qiankun";

// 在需要的时机手动加载
const microApp = loadMicroApp({
  name: "sub-app-1",
  entry: "//localhost:3000",
  container: "#sub-app-container",
});

// 在需要的时机手动卸载
microApp.unmount();

工作原理：

• 不需要调用 start()
• 开发者完全控制加载和卸载时机
• 通常配合主应用的路由组件生命周期使用

---

二、核心区别对比表

特性	registerMicroApps + start	loadMicroApp
路由控制	qiankun 自动控制	开发者手动控制
是否需要 start()	✅ 必须调用	❌ 不需要
子应用容器	必须始终存在于 DOM	可动态创建/销毁
主应用路由定义	通过 activeRule 匹配	不依赖路由，可在任意场景使用
多子应用同时加载	❌ 默认路由互斥，难以实现	✅ 天然支持，核心优势
生命周期控制	自动	手动
适合场景	简单的路由切换	复杂的动态加载需求
仪表盘/工作台	❌ 不适合	✅ 最佳选择
弹窗/Tab 中加载	❌ 不适合	✅ 天然支持

---

三、registerMicroApps + start 模式详解

3.1 优点

1. 配置简单：只需注册一次，qiankun 自动处理
2. 开箱即用：不需要额外的路由配置
3. 统一管理：所有子应用配置集中在一处

3.2 缺点与问题

问题 1：容器必须始终存在

当路由切换时，容器被销毁，qiankun 会报错：

[qiankun]: Target container with #sub-app-container not existed

解决方案：容器始终存在，用 v-show 控制显示。

问题 2：主子应用路由冲突

当主应用和子应用都使用 createWebHistory 时，两个路由实例都会监听 popstate 事件，导致浏览器返回按钮行为异常。

解决方案：