主框架不限制接入应用的技术栈,微应用具备完全自主权
微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
每个微应用之间状态隔离,运行时状态不共享
微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
1url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
2UI 不同步,DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的d框,同时我们要求这个d框要浏览器居中显示,还要浏览器 resize 时自动居中。
3全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
4慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。
通过监听 url change 事件,在路由变化时匹配到渲染的子应用并进行渲染,这个思路也是目前实现微前端的主流方式。同时single-spa要求子应用修改渲染逻辑并暴露出三个方法:bootstrap、mount、unmount,分别对应初始化、渲染和卸载,这也导致子应用需要对入口文件进行修改。过于基础,成本太高,不建议。
qiankun是阿里推出的一个基于single-spa的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。因为是基于single-spa进行封装,所以single-spa的特点也被qiankun继承下来。成本低于single-spa,高于MicroApp。
MicroApp是京东推出的一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。它是目前市面上接入微前端成本最低的框架,并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。是目前市面上接入微前端成本最低的方案。
single-spa github地址: >微前端qiankun 使用,一些注意事项。附上 qiankun官网
主应用(vue)
1、安装qiankun
2、修改 mainjs
主应用到这就可以了,下面的是一些扩展加载微应用事项
3、router页面配置加载微应用
修改主应用routerjs
在Aboutvue文件中加入
4、如果在vue-admin模板中使用乾坤,需要注意的是:
<div id="container"></div> 不能写在页面中,只能写在Appmainvue 中,
路由需要配置重定向
判断改变路由(这里可写配置文件,偷懒就写死了)
AppMainvue,需要判断显示的是哪个微应用,改变其id显示
微应用(vue)
1、在 src 目录新增 public-pathjs:
2、 mainjs 修改。
3、打包配置修改(vueconfigjs):
微应用(react)
1、在 src 目录新增 public-pathjs:
2、设置 history 模式路由的 base:
3、 indexjs 修改
4、webpack 配置
安装插件 @rescripts/cli。
根目录新增 rescriptsrcjs:
修改 packagejson:现在,Web开发世界在不断变化,趋势也在不断变化。有时,这些趋势的变化速度远远快于它们的使用速度。要保持领先,就必须关注最新的流行趋势、更新、技术和方法。此外,了解趋势并随时了解周围发生的事情对于web开发是非常必要的。在微前端架构中,主应用和子应用是两个不同的应用。主应用一般是指整个微前端应用的容器,负责管理和加载各个子应用,而子应用则是具体的业务模块。因此,主应用和子应用之间必须是独立的进程或者线程,不能是同一个应用。如果主应用和子应用是同一个应用,那么它们之间的耦合度会非常高,很难实现微前端带来的独立开发、独立部署等优势。因此,针对同一应用的不同功能或页面的拆分,建议使用组件化或模块化的思想进行重构,而不是将它们划分成独立的子应用。参考: >
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)