微前端架构体系


微前端(Micro-Frontends)是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具,而是一套架构体系。

1.可以把它理解成一个Iframe,就像这样。。。


但是他不是一个iframe
为什么这么说,因为iframe有其局限性。

  • iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题。
  • url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
  • UI 不同步,DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框,同时我们要求这个弹框要浏览器居中显示,还要浏览器 resize 时自动居中..
  • 全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
  • 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。
    why not a iframe 传送门

如果想继续入坑的话,不妨了解一下

Qiankun (Single Spa) qiankun官方文档传送门
Webpack5 / Module Federation


这是小红书B端ARK应用的设计理念,root是基座,layout整体布局

总结

  • 微前端并不能减少资源体积,反而会增加 Webpack 5 Module Federation 微前端可以提高 Ark 开发体验

优点:

  • 独立开发子应用 新的子应用体积小启动快。 子应用可以使用新的特性

缺点:

  • 需要手动在 root 里增加配置 需要 appcenter 配置新的应用 需要 设置新的 路由解析
    如果没有确切的需求,还是不用增加子应用


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM