主流微前端框架

框架

描述

优点

缺点

Qiankun

基于 single-spa 的微前端方案

1、html entry
2、js 沙箱：SnapshotSandbox、LegacySandbox、ProxySandbox
3、css 沙箱：strictStyleIsolation、experimentalStyleIsolation
4、静态资源预加载能力

1、适配成本比较高，工程化、生命周期、静态资源路径、路由等都要做一系列的适配工作；
2、css 沙箱采用严格隔离会有各种问题，js 沙箱在某些场景下执行性能下降严重；
3、无法同时激活多个子应用，也不支持子应用保活；
4、无法支持 vite 等 esmodule 脚本运行；

micro-app

基于 webcomponent + qiankun sandbox 的微前端方

1、使用 webcomponet 加载子应用相比 single-spa 这种注册监听方案更加优雅
2、复用经过大量项目验证过 qiankun 的沙箱机制也使得框架更加可靠；
3、组件式的 api 更加符合使用习惯，支持子应用保活；
4、降低子应用改造的成本，提供静态资源预加载能力；

1、css 沙箱依然无法绝对的隔离，js 沙箱做全局变量查找缓存，性能有所优化
2、支持 vite 运行，但必须使用 plugin 改造子应用，且 js 代码没办法做沙箱隔离；
3、对于不支持 webcompnent 的浏览器没有做降级处理；

EMP 方案

基于 webpack 5 module federation 的微前端方案

1、webpack 联邦编译可以保证所有子应用依赖解耦；
2、应用间去中心化的调用、共享模块；
3、模块远程 ts 支持；

1、对 webpack 强依赖，老旧项目不友好；
2、没有有效的 css 沙箱和 js 沙箱，需要靠用户自觉；
3、子应用保活、多应用激活无法实现；
4、主、子应用的路由可能发生冲突；

无界

1、接入简单只需要四五行代码
2、不需要针对vite额外处理
3、预加载
4、应用保活机制

1、隔离js使用一个空的iframe进行隔离
2、子应用axios需要自行适配
3、iframe沙箱的src设置了主应用的host，初始化iframe的时候需要等待iframe的location.orign从'about:blank'初始化为主应用的host，这个采用的计时器去等待的不是很优雅。

以下问题仅针对qiankun讨论

架构调整：将现有的独立应用程序适配为 Qiankun 的子应用需要对应用程序进行一些架构调整。这可能包括调整路由、状态管理和应用入口等方面。具体调整的复杂程度取决于应用程序的结构和技术栈。
依赖冲突解决：如果现有应用程序之间存在依赖冲突，例如使用了相同的全局变量或第三方库的不同版本，就需要解决这些冲突。这可能需要对依赖进行升级、重构代码或引入解决方案（如使用 Webpack 的 Module Federation）。
沙盒隔离：Qiankun 使用沙盒来隔离每个子应用的执行环境，以防止冲突和影响其他应用程序。适配成本可能涉及将现有应用程序包装在沙盒中，并确保应用程序在沙盒中正常运行。
兼容性和稳定性测试：适配成本还包括对子应用和主应用的兼容性和稳定性进行测试。这包括确保子应用可以正确加载和卸载、正确处理路由和状态管理等。同时，还需要确保主应用可以正确集成和管理子应用。
部署和运维：集成 Qiankun 后，部署和运维的流程可能需要进行调整。这可能涉及到构建、打包、部署和监控方面的变化。确保在部署和运维过程中充分测试和验证各个应用程序的正常运行。

在使用 Qiankun 进行微前端应用开发时，样式隔离是一个需要特别关注的问题。由于多个子应用可能使用不同的样式库和样式规则，确保它们之间的样式不相互干扰是非常重要的。以下是一些在 Qiankun 中实现样式隔离的方法：

CSS 命名空间：使用不同的 CSS 类名和命名空间，以确保样式规则仅适用于当前子应用的 DOM 元素。这可以通过给每个子应用的根节点添加特定的类名前缀或命名空间来实现。
CSS Modules：使用 CSS Modules 技术，每个子应用都可以拥有自己的局部 CSS，避免全局样式的冲突。CSS Modules 可以通过将类名转换为唯一的哈希值来确保局部作用域。
Shadow DOM：使用 Shadow DOM 技术，可以在子应用中创建一个封闭的 DOM 子树，并将样式限定在该子树范围内。这样可以确保子应用的样式不会影响其他子应用或主应用。
CSS-in-JS：使用 CSS-in-JS 库，如 styled-components 或 emotion，可以在子应用中创建和管理组件级别的样式，确保样式的封装性和隔离性。
作用域选择器（Scoped Selector）：在子应用的样式中使用作用域选择器，如 :local 或 :scope，以限定样式的作用范围。这可以确保样式仅适用于当前子应用的特定组件或 DOM 节点。