手机免费建站系统,南通公司做网站,seo怎样优化网站,广告设计图片 门头微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端架构具备以下几个核心价值#xff1a;
1、技术栈无关 主框架不限制接入应用的技术栈#xff0c;微应用具备完全自主权 2、独立开发、独立部署 微应用仓库独立#xff0…微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端架构具备以下几个核心价值
1、技术栈无关 主框架不限制接入应用的技术栈微应用具备完全自主权 2、独立开发、独立部署 微应用仓库独立前后端可独立开发部署完成后主框架自动完成同步更新 3、增量升级 在面对各种复杂场景时我们通常很难对一个已经存在的系统做全量的技术栈升级或重构而微前端是一种非常好的实施渐进式重构的手段和策略 4、独立运行时 每个微应用之间状态隔离运行时状态不共享
微前端的几种框架
阿里-基于 single-spa 的 qiankun https://qiankun.umijs.org/zh/guide 京东-基于 WebComponent 的 micro-app https://zeroing.jd.com/docs.html#/ 腾讯-基于 webcomponent 容器 iframe 沙箱 的 无界方案 https://wujie-micro.github.io/demo-main-vue/home 虽然我们现在用的是 qiankun 但那是前两年调研的结果在我写这篇文章的过程中我突然发现2022年腾讯开源了无界看了下官方文档看来无界更好些。
接下来我们来对比下这三个框架
一、qiankun 方案 qiankun 方案是基于 single-spa 的微前端方案。
特点 1、 html entry 的方式引入子应用相比 js entry 极大的降低了应用改造的成本 2、完备的沙箱方案js 沙箱做了 SnapshotSandbox、LegacySandbox、ProxySandbox 三套渐进增强方案css 沙箱做了 strictStyleIsolation、experimentalStyleIsolation 两套适用不同场景的方案 3、做了静态资源预加载能力
不足 1、适配成本比较高工程化、生命周期、静态资源路径、路由等都要做一系列的适配工作 2、css 沙箱采用严格隔离会有各种问题js 沙箱在某些场景下执行性能下降严重 3、无法同时激活多个子应用也不支持子应用保活有需要同时激活多个子应用将应用当作模块使用的场景qiankun很明显不适合。 4、无法支持 vite 等 esmodule 脚本运行这也是困扰我们的一点因为现在项目用的qiankun所以导致在升级到 Vue3.0后无法使用 vite而是依然用的Vue3.0 webpack。
底层原理 js沙箱使用的是proxy进行快照然后用用 with(window){} 包裹起来 with内的window其实就是proxy.window 我们声明变量 var name ‘小满’ 实际这个变量挂到了proxy.window 并不是真正的window css沙箱原理 第一个就是shadowDom隔离 第二个类似于Vue的scoped [data-qiankun-426732]
二、micro-app 方案 micro-app 是基于 webcomponent qiankun sandbox 的微前端方案。
特点 1、使用 webcomponet 加载子应用相比 single-spa 这种注册监听方案更加优雅 2、复用经过大量项目验证过 qiankun 的沙箱机制也使得框架更加可靠 3、组件式的 api 更加符合使用习惯支持子应用保活 4、降低子应用改造的成本提供静态资源预加载能力
不足 1、接入成本较 qiankun 有所降低但是路由依然存在依赖 虚拟路由已解决 2、多应用激活后无法保持各子应用的路由状态刷新后全部丢失 虚拟路由已解决 3、css 沙箱依然无法绝对的隔离js 沙箱做全局变量查找缓存性能有所优化 4、支持 vite 运行但必须使用 plugin 改造子应用且 js 代码没办法做沙箱隔离 5、对于不支持 webcompnent 的浏览器没有做降级处理
底层原理 js隔离跟qiankun类似也是使用proxy withcss隔离自定义前缀类似于scoped
三、无界方案 无界微前端方案基于 webcomponent 容器 iframe 沙箱能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。
特点 1、接入简单只需要四五行代码很简单 2、不需要针对vite额外处理 3、预加载 4、应用保活机制
不足 1、隔离js使用一个空的iframe进行隔离 2、子应用axios需要自行适配 3、iframe沙箱的src设置了主应用的host初始化iframe的时候需要等待iframe的location.orign从’about:blank’初始化为主应用的host这个采用的计时器去等待的不是很优雅。
底层原理 使用shadowDom 隔离cssjs使用空的iframe隔离通讯使用的是proxy。
因为我用的是 Vue框架所以主要从vue框架出发来看。
首先qiankun本身固有的一些缺点比如无法同时激活多个子应用、不支持vite所以有可能有这类需求的qiankun就不需要考虑了 micro-app 和 无界我个人更倾向于 无界毕竟2022年刚出的功能更健全。唯一缺点可能是社区文档没那么多出了问题网上没那么多博客文档支持。
