微前端框架-无界

无界微前端框架是一款基于Web Components + iframe的微前端解决方案，它具备成本低、速度快、原生隔离、功能强等一系列优点。以下是对无界微前端框架的详细介绍：

一、背景与概述

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。无界微前端框架通过引入Web Components和iframe技术，为开发者提供了一种高效、灵活的微前端解决方案。该框架旨在解决现有微前端方案在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite框架支持、应用共享等用户核心诉求上存在的问题。

二、核心特点

1. 成本低：无界微前端框架的主应用使用成本低，子应用适配成本也相对较低。
2. 速度快：子应用首屏打开速度快，且子应用运行速度快。这得益于无界框架对资源的优化管理和预加载策略。
3. 原生隔离：CSS样式通过Web Components可以做到严格的原生隔离，JS运行在iframe中也实现了严格的原生隔离。这种隔离机制确保了子应用之间的独立性，避免了样式冲突和脚本冲突。
4. 功能强大：无界微前端框架支持子应用保活、支持子应用嵌套、支持多应用激活、支持应用共享、支持去中心化通信等。这些功能使得无界框架在应对复杂前端应用时具有更高的灵活性和可扩展性。

三、技术实现

无界微前端框架采用Web Components + iframe的沙箱模式，通过继承iframe的优点并解决其缺点来实现原生隔离和高效运行。具体实现方式包括：

1. 创建和主应用同源的iframe：路径携带了子路由的路由信息，同源是为了方便应用间的通信。
2. 解析子应用的入口HTML：识别出HTML部分，分离style和js；处理css并重新注入html；创建webComponent并挂载html。
3. 在iframe中拦截document对象：统一将dom指向shadowRoot，解决弹窗或冒泡组件无法覆盖主应用的问题。
4. 通信机制：iframe和主应用是同域的，天然共享内存通信，无界提供了一个去中心化的事件机制来解决通信问题。
5. 路由状态管理：浏览器的前进后退可以天然的作用到iframe上，此时监听iframe的路由变化并同步到主应用，如果刷新浏览器，就可以从url读回保存的路由。

四、优势与应用

无界微前端框架的优势在于其低成本、高速度、原生隔离和强大的功能。这使得它在处理大型、复杂的前端应用时具有显著的优势。同时，无界框架还支持多种前端技术栈，如Vue、React等，使得开发者可以根据项目需求灵活选择技术栈。

在应用场景方面，无界微前端框架适用于需要高效协同开发、独立部署和升级的大型web应用。通过引入无界框架，开发者可以将前端应用拆分为多个独立的微前端应用，每个应用都可以独立开发、测试和部署。这不仅可以提高开发效率，还可以降低项目复杂度和风险。