微前端架构（qiankun、iframe）

专题版块详见 微前端。

微前端架构是一种用于将多个前端应用组合成一个整体的技术方案，它可以使多个团队独立开发、部署、运行前端应用。qiankun 和 iframe 是实现微前端架构的两种主要技术方案。

相关博客文章

1. 从零开始搭建一个微前端架构 -- 微前端「qiankun」的实践。
2. 具体实现 -- 集成方案-样式隔离。
3. 具体实现 -- 集成方案-组件通信。

提示

微前端架构，需要弄清楚几个概念：

• 微前端：一种将前端应用拆分为多个独立、可复用的子应用的技术方案。
• 微前端框架：如 qiankun，用于实现微前端架构的框架。
• 微前端应用：由微前端框架管理的子应用。
• 主应用：包含多个微前端应用的容器应用。
• 子应用：被主应用加载和管理的微前端应用。
• 沙箱：用于隔离微前端应用之间的作用域，防止相互干扰。
• 路由：用于管理微前端应用的加载和显示。
• 通信：用于微前端应用之间的数据交换和事件通知。
• 生命周期：用于管理微前端应用的加载、卸载和更新。
• 性能优化：用于提高微前端应用的加载速度和运行效率。
• 安全性：用于确保微前端应用的安全性和可靠性。
• 兼容性：用于确保微前端应用在不同浏览器和设备上的兼容性。
• 可维护性：用于确保微前端应用的易于维护和扩展。

解决的痛点问题是：如何将多个独立的前端应用组合成一个整体应用，同时保持各个应用的独立性和可维护性。

一、本质

微前端的本质是 “前端应用的拆分和集成”，其思想类似于后端的微服务架构。

• 拆分：将前端整体应用划分为多个独立的小应用，通常由不同团队或模块开发。
• 集成：将这些小应用组合到一起，使其像一个整体应用一样运行。
• 独立性：每个小应用可以独立开发、测试、部署和运行，互不干扰。
• 技术栈无关：子应用可以采用不同的前端框架（如 React、Vue、Angular 等）。

二、原理

1. qiankun 原理

qiankun 是基于 single-spa 的微前端框架，主要通过 运行时动态加载 子应用，并保证子应用间的隔离。

• 主应用与子应用：
  • 主应用负责容器（框架）和路由管理，加载子应用。
  • 子应用是独立的前端项目，按照约定的生命周期规范暴露出入口。
• 技术实现：
  • 动态加载子应用的资源：通过 JS 脚本和样式的动态注入。
  • 路由劫持：通过监听 hashchange 和 popstate 事件，控制子应用的加载。
  • 沙箱隔离：qiankun 提供了沙箱机制（如 Proxy 沙箱、快照沙箱），解决子应用之间的全局变量和样式冲突。
  • 应用通信：通过 qiankun 的全局状态管理或自定义通信机制，实现应用间的数据交互。

2. iframe 原理

iframe 是 HTML 提供的嵌套网页标签，本质上是将子应用嵌入到父应用中运行。

• 独立性：每个子应用运行在独立的浏览器上下文中（独立的 DOM、JavaScript 全局作用域、CSS 样式），天然隔离。
• 资源加载：iframe 的内容独立于父页面加载，互不影响。
• 数据通信：通过 postMessage 实现父应用和子应用之间的通信。

三、解决的问题

1. 团队独立开发与部署

   • 每个团队可以独立开发、测试和部署自己的子应用。
   • 子应用之间可以使用不同的技术栈，降低技术耦合度。

2. 应用拆分与可维护性

   • 将大型单体应用拆分为多个独立的小应用，使代码更易维护，减少迭代成本。

3. 技术栈迁移与升级

   • 允许新旧技术栈共存，例如部分子应用使用 Vue，部分子应用使用 React。
   • 避免一次性整体升级带来的风险。

4. 应用动态加载与按需加载

   • 主应用可以根据路由动态加载子应用，减少首屏加载时间，提高性能。

5. 隔离与安全性

   • 通过沙箱机制（如 qiankun）或 iframe，实现子应用之间的样式、全局变量的隔离，避免互相污染。
   • 在 iframe 中，子应用运行在独立的上下文，安全性更高。

6. 兼容多团队协作

   • 多个团队可以并行开发不同的功能模块，避免相互依赖，提升开发效率。

总结对比

特性	qiankun	iframe
隔离性	通过沙箱机制实现样式和全局变量隔离	浏览器原生提供强隔离
资源加载	动态加载 JS 和 CSS	iframe 内部独立加载资源
技术栈支持	支持多种技术栈（React、Vue 等）	支持任意技术栈
通信方式	通过全局状态管理或自定义事件通信	通过 postMessage 通信
性能	较好，适合复杂应用	较差，加载 iframe 开销较大
灵活性	高，开发体验更好	低，iframe 灵活性较差
安全性	依赖沙箱实现	原生上下文隔离，安全性更高

适用场景

• qiankun 适合复杂的企业级微前端项目，追求性能和灵活性。
• iframe 适合安全性要求较高、独立性强的小型微前端项目，但性能和开发体验较差。