微前端解决方案-qiankun

qiankun（乾坤）是蚂蚁金服开源的一个微前端实现库，它的核心价值在于：它能让你把一个巨大的"巨石应用"，拆分成多个可以独立开发、部署的小应用，并且这些小应用可以用不同的技术栈（React、Vue、Angular 等），最后还能完美地拼在一起。

它的名字源于"小世界有大乾坤"，寓意在微前端这个小世界里，通过这个框架能构建出强大的架构。

解决的核心痛点

痛点	qiankun 的解决方案
技术栈升级难	旧系统用 jQuery，新模块用 React，互不干扰，可以渐进式重构
团队协作冲突	各子应用代码仓库独立，CI/CD 独立，互不等待
应用过于臃肿	按需加载子应用，主框架保持轻量
全局样式/JS污染	提供严格的样式隔离和 JS 沙箱机制

它是如何做到的？(核心原理)

相比于直接使用原生 iframe 或 Single-SPA，qiankun 最精妙的地方在于它解决了以下两个核心问题：

1. HTML Entry (让接入像 iframe 一样简单)

早期微前端方案（如 Single-SPA）通常要求子应用只输出一个 JS 文件（JS Entry），这意味着子应用必须大改打包配置，且无法利用按需加载等特性。

qiankun 的做法是：你只需要提供子应用的 URL，它会像一个"爬虫"一样去抓取 HTML 内容。

javascript 复制代码

// 主应用注册子应用
registerMicroApps([
  {
    name: 'react app',
    entry: '//localhost:7100', // 👈 直接填子应用的地址就行
    container: '#container',
    activeRule: '/react',
  },
]);

它会自动解析 HTML 中的 <link> 和 <script>，处理好资源路径后再插入到 DOM 中。这使得接入一个现有应用的改造成本极低。

2. JS 沙箱 & 样式隔离 (杜绝"互相打架")

这是微前端最头疼的技术难点，qiankun 通过以下两种模式解决了"你改了 window 变量影响我"的问题：

Proxy 沙箱（快照沙箱降级方案） ：在支持 Proxy 的浏览器中，qiankun 会创建一个"虚假的" window 对象给子应用。子应用自以为改了全局变量，其实改的是"沙箱里的副本"，完全不影响主应用和其他子应用。
样式隔离 ：qiankun 提供了几种隔离方案，最常用的是 strictStyleIsolation 。它利用 Web Component 的 Shadow DOM 特性，为每个子应用创建一个独立的 DOM 树，就像给子应用罩了一个"玻璃罩"，里面的 CSS 样式完全出不来，外面的也进不去。

总结：qiankun 适用的场景

中后台管理系统：业务复杂，团队人多，需要并行开发。
大型电商 / 一体化平台：需要接入不同部门开发的模块（如商家后台、客服系统等）。
遗留系统重构：不想完全重写老代码，又想用新技术写新功能，qiankun 是绝佳的渐进式重构工具。