微前端（无界）(什么是微前端)

微前端（无界）

推荐整理分享微前端（无界）(什么是微前端)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:微前端无界不同项目暴露,微前端无界预加载,微前端无界的缺点,微前端无界官网,微前端无界官网,微前端无界的缺点,微前端无界的缺点,微前端无界官网,内容如对您有帮助，希望把文章链接给更多的朋友！

前言：微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题，或无法提供支持。本文提供一种基于 iframe 的全新微前端方案，完善的解决了这些核心诉求。

微前端概念

微前端是借鉴了微服务的理念，将一个庞大的应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，还可以随意组合，这样就降低了耦合度，从而更加灵活。

微前端特性

技术栈无关 主框架不限制接入应用的技术栈，子应用可自主选择技术栈（vue，react，jq，ng等）独立开发/部署 各个团队之间仓库独立，单独部署，互不依赖增量升级 当一个应用庞大之后，技术升级或重构相当麻烦，而微应用具备渐进式升级的特性独立运行时 微应用之间运行时互不依赖，有独立的状态管理

场景演示

后台管理系统

最外面一层可以当主应用，里面可以放不同的子应用子应用不受技术的限制。

web商店（未来趋势）

例如一些导航网站,可以提供微前端的接入，我们的网站也可以入驻该网站，并且还可以提供一些API增加交互，有点类似于小程序。小程序可以调用微信的一些能力例如支付，扫码等，导航类型的网站也可以提供一些API，我们的网站接入之后提供API调用，可以实现更多有趣的玩法。

微前端方案

iframe 方案

特点

接入比较简单隔离非常稳完美

不足

dom割裂感严重，弹框只能在iframe，而且有滚动条通讯非常麻烦，而且刷新iframe url状态丢失前进后退按钮无效

qiankun 方案

qiankun 方案是基于 single-spa 的微前端方案。

特点

html entry 的方式引入子应用，相比 js entry 极大的降低了应用改造的成本；完备的沙箱方案，js 沙箱做了 SnapshotSandbox、LegacySandbox、ProxySandbox 三套渐进增强方案，css 沙箱做了 strictStyleIsolation、experimentalStyleIsolation 两套适用不同场景的方案；做了静态资源预加载能力；

不足

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

底层原理 js沙箱使用的是proxy进行快照然后用用 with(window){} 包裹起来 with内的window其实就是proxy.window 我们