微前端(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 配置新的应用 需要 设置新的 路由解析
如果没有确切的需求,还是不用增加子应用