对 qiankun 框架的理解

qiankun 是一款由阿里开源的 微前端框架，基于 Single-SPA 封装扩展，旨在解决大型前端应用的 模块化拆分、多技术栈共存 与 独立部署 问题，核心价值在于 降低系统耦合度、提升团队协作效率 并支持 渐进式技术升级。

---

一、qiankun 的核心架构

1. 微前端概念

• 定义：将单体应用拆分为多个独立子应用（可不同技术栈），集成到主应用中，实现 独立开发、独立部署、运行时集成。
• 核心问题：解决巨石应用（Monolith）的维护难、技术栈僵化、团队协作低效等问题。

2. qiankun 的实现原理

• 主应用（容器）：负责路由分发、子应用加载、全局状态管理。
• 子应用（微应用）：独立开发的技术栈无关应用，通过配置接入主应用。
• 关键技术：
  • HTML Entry：通过解析子应用的 HTML 入口文件，动态加载 JS/CSS 资源。
  • JS 沙箱（Sandbox）：隔离子应用 JS 全局变量（如 window），防止污染。
  • 样式隔离：通过 Shadow DOM 或 CSS 命名空间避免样式冲突。
  • 应用通信：基于 props 或全局状态管理（如 Redux、Vuex）传递数据。

---

二、核心功能与使用场景

1. 核心功能

功能	实现方式	解决的问题
应用注册	主应用配置子应用入口、路由匹配规则	动态加载子应用
资源加载	解析子应用 HTML 入口，按需加载 JS/CSS	避免资源冗余，优化性能
沙箱隔离	代理 window、document 对象，实现 JS 隔离	防止全局变量污染
样式隔离	动态添加/移除 <style> 标签或使用 Shadow DOM	避免 CSS 冲突
预加载	空闲时预加载子应用资源	提升子应用切换速度

2. 典型使用场景

• 多团队协作：各团队独立开发子应用，技术栈可选（React、Vue、Angular）。
• 遗留系统改造：逐步替换旧模块，新旧系统共存（如 jQuery 与 React 混合）。
• 模块化拆分：按业务功能拆分应用（如电商平台的商品、订单、用户中心）。