往期精彩文章推荐
🔥🔥🔥微前端无界(wujie)源码浅析------子应用加载与js、css沙箱实现
🏠🏠🏠微前端我劝你千万别无脑冲qiankun
一个js库就把你的网页的底裤🩲都扒了------import-html-entry
🧶创建js沙箱都有哪些方式
两分钟快速了解css样式隔离方案有哪几种
这一次再也不怕webpack面试了【webpack配置、处理资源】
🏝️🏝️🏝️一个babel插件让项目中所有antd table实现拖拽控制列宽
qiankun 、single-spa 和 import-html-entry 是微前端生态中的三个重要工具，它们之间的关系密切且互补。以下是对它们的关系和作用的详细解析：
1. single-spa
定义
- single-spa 是一个微前端框架，用于将多个独立的前端应用整合到一个页面中。
- 它提供了一套生命周期钩子（如
bootstrap、mount、unmount），用于管理子应用的加载、挂载和卸载。
核心功能
- 应用注册 ：通过
registerApplication注册子应用。 - 路由管理：根据路由规则激活或卸载子应用。
- 生命周期管理：定义子应用的启动、挂载和卸载逻辑。
特点
- 框架无关：支持 React、Vue、Angular 等多种前端框架。
- 灵活性高：开发者可以自定义子应用的加载和渲染逻辑。
局限性
- 资源加载：single-spa 本身不提供资源加载的能力，需要开发者自行实现。
- 沙箱隔离：single-spa 不提供 JavaScript 和 CSS 的沙箱隔离，需要额外处理。
2. import-html-entry
定义
- import-html-entry 是一个工具库，用于从 HTML 文件中提取并加载子应用的资源（如 JS、CSS）。
- 它是 qiankun 的核心依赖之一。
核心功能
- HTML 解析：解析子应用的 HTML 文件，提取其中的 JS 和 CSS 资源。
- 资源加载：动态加载子应用的 JS 和 CSS 文件。
- 脚本执行：在沙箱中执行子应用的 JS 代码。
特点
- 支持 HTML Entry：通过 HTML 文件加载子应用，适合复杂场景。
- 资源隔离：通过沙箱机制隔离子应用的 JS 和 CSS。
与 single-spa 的关系
- 补充 single-spa 的功能 ：single-spa 本身不提供资源加载的能力，而
import-html-entry填补了这一空白。 - 支持 HTML Entry ：
import-html-entry使得 single-spa 可以通过 HTML 文件加载子应用。
3. qiankun
定义
- qiankun 是一个基于 single-spa 的微前端解决方案，提供了开箱即用的功能和更完善的工具链。
- 它在 single-spa 的基础上封装了更多实用功能，如资源加载、沙箱隔离、样式隔离等。
核心功能
- 应用注册：基于 single-spa 的应用注册机制。
- 资源加载 ：基于
import-html-entry的资源加载能力。 - 沙箱隔离：提供 JavaScript 和 CSS 的沙箱隔离，避免子应用之间的冲突。
- 样式隔离：通过 Shadow DOM 或 Scoped CSS 实现样式隔离。
- 预加载：支持子应用的预加载，提升用户体验。
特点
- 开箱即用：qiankun 提供了完整的微前端解决方案，开发者无需关心底层实现。
- 功能完善：在 single-spa 的基础上增加了资源加载、沙箱隔离、样式隔离等功能。
- 易于集成：支持多种前端框架，且与现有项目无缝集成。
与 single-spa 和 import-html-entry 的关系
- 基于 single-spa：qiankun 的核心应用注册和生命周期管理依赖于 single-spa。
- 依赖 import-html-entry ：qiankun 使用
import-html-entry实现子应用的资源加载和沙箱隔离。 - 封装和扩展 ：qiankun 在 single-spa 和
import-html-entry的基础上封装了更多功能，提供了更完善的微前端解决方案。
4. 三者关系总结
| 工具 | 角色 | 核心功能 | 与 qiankun 的关系 |
|---|---|---|---|
| single-spa | 微前端框架 | 应用注册、路由管理、生命周期管理 | qiankun 基于 single-spa 实现应用注册和生命周期管理 |
| import-html-entry | 资源加载工具 | HTML 解析、资源加载、沙箱隔离 | qiankun 使用 import-html-entry 实现资源加载和沙箱隔离 |
| qiankun | 微前端解决方案 | 应用注册、资源加载、沙箱隔离、样式隔离、预加载 | 在 single-spa 和 import-html-entry 的基础上封装和扩展 |