qiankun 是基于 single-spa 的微前端框架，帮你用“搭积木”的方式把多个独立部署的前端应用拼成一个整体。它解决了子应用加载、JS 沙箱隔离、样式隔离还有主子应用通信这些落地中最头疼的问题。

必会基础

注册与启动

子应用、怎么找、何时激活；start 则拉起整个微前端机制，开始监听路由。

import { registerMicroApps,start } from 'qiankun';registerMicroApps();start，// 启动

典型场景

• 主应用拆出多个业务模块，按 URL 前缀加载不同子应用。
• 多个团队独立开发、独立部署，通过主应用聚合。

使用者痛点

• activeRule 必须保证同一时刻只有一个子应用被激活，否则 qiankun 会报错并拒绝启动。
• 主应用 DOM 中必须提前准备好 #subapp-container否则挂载时报错找不到容器。
• 当路由规则重叠或配置错误时会导致“未匹配到任何子应用”或“冲突报错”，影响调试体验。

子应用导出生命周期

子应用必须向全局暴露 bootstrapmountunmount 三个函数。按理说，qiankun 用这三把“钥匙”来控制子应用的启动、激活和卸载。老实说，

import React from 'react';import ReactDOM from 'react-dom';import App from './App';function render {
const { container } = props;const root = container?
container.querySelector : document.getElementById;怎么说呢，ReactDOM.render;}
export async function bootstrap {
console.log;}
export async function mount {
render;}
export async function unmount {
const { container } = props;const root = container?container.querySelector : document.getElementById;ReactDOM.unmountComponentAtNode;}

• mount//unmount/ 中完成渲染/销毁，避免内存泄漏。

User Pain Points

• alert//setTimeout/未返回 Promise 会导致 qiankun 等待超时而挂起。
ReactDOM.unmountComponentAtNode 或 Vue.$destroy 时事件监听和定时器会一直跑，引发内存泄漏和性能下降。

子应用打包配置

"qiankun" 用 fetch 去拉取子应用的 HTML 和执行 JS。所以你必须让子应用输出 UMD 格式，并允许跨域访问。

// 子应用的 vue.config.js 或 webpack.config.js
module.exports = {
configureWebpack: {
从output来看，{
library: 'appVue'。// 必须和主注册的 name 严格一致
libraryTarget: 'umd',// 输出格式为 umd
},},devServer: {
headers: {
'Access-Control-Allow-Origin': '*',// 主 app 可以跨域 fetch
},},};

User Pain Points & Tips:

Cores & Principles

JS 沙箱机制

"qiankun" 用沙箱为每个子 app 创建一个“假 window”，让它们各自运行不互相污染变量。其实，

// 子 app A 写入 window.sharedData = '来自A';console.log，// 来自A
// 子 app B 阅读 console.log;// undefined —— 已隔离开了

样式隔离方案

HTML Entry 加载原理

概述： QianKun 不直接用 js 文件，而是 fetch 子 app 的 html 页面从中提取 js/css 并注入执行。这能保证动态资源加载顺序，但也带来方法解析难题。