标签：体系 浏览器 应用 前端 iframe 架构 上下文 隔离

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

标签：体系,浏览器,应用,前端,iframe,架构,上下文,隔离
来源： https://www.cnblogs.com/webztz/p/14789981.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。