微前端框架-无界

无界微前端框架是一款基于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应用。通过引入无界框架,开发者可以将前端应用拆分为多个独立的微前端应用,每个应用都可以独立开发、测试和部署。这不仅可以提高开发效率,还可以降低项目复杂度和风险。

相关推荐
ygria2 天前
样式工程化:如何实现Design System
前端·前端框架·前端工程化
冷冷的菜哥3 天前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
Hilaku3 天前
我为什么认为 CSS-in-JS 是一个失败的技术?
前端·css·前端框架
薛定谔的算法3 天前
Vue.js 条件渲染与列表渲染详解:原理、用法与最佳实践
前端·vue.js·前端框架
OEC小胖胖3 天前
App Router vs. Pages Router:我应该如何选择?
开发语言·前端·前端框架·web·next.js
歪歪1003 天前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
Aotman_4 天前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
伍哥的传说4 天前
React Device Detect 完全指南:构建响应式跨设备应用的最佳实践
react.js·前端框架·react hooks·操作系统识别·device-detect·react设备检测·浏览器检测
百思可瑞教育4 天前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育