转载请注明出处,点击此处 查看更多精彩内容。
微前端是什么?
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 Web 应用的技术手段及方法策略。
微前端架构旨在解决单体应用在较长时间跨度下,由于参与的人员、团队的增多、技术变迁等原因,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。
它借鉴了后端微服务的架构理念,核心在于将多个可以独立开发、独立运行、独立部署的小型应用融合为一个应用。微前端既可以将多个项目融合为一,又可以减少项目之间的耦合,提升项目扩展性,相比一整块的前端仓库,微前端架构下的前端仓库更小更灵活。
微前端的使用场景
- 制作一个管理平台,把多个系统统一接入这个平台。
- 一个应用使用 Vue 框架开发,其中有一个比较独立的模块,开发者想尝试使用 React 框架来开发,等模块单独开发部署完,再把这个模块应用接回去。
- 有一个巨大的应用,为了降低开发和维护成本,分拆成多个小应用进行开发和部署,然后用一个平台将这些小应用集成起来。
- ......
微前端需要解决的问题
- 子应用的加载和卸载
页面需要从一个子应用切换到另一个子应用,框架必须具备加载、渲染、切换的能力。 - 子应用路由状态保持
激活子应用后,浏览器刷新、前进、后退子应用的路由都应该可以正常工作。 - 应用间的通信
应用间可以方便、快捷的通信。 - 子应用独立运行
子应用运行会污染全局的window
对象,样式会污染其他应用,必须有效的隔离起来。
微前端的好处
- 独立开发、独立部署
微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新。 - 技术栈无关
主框架不限制接入应用的技术栈,微应用具备完全自主权。 - 独立运行时
每个微应用之间状态隔离,运行时状态不共享。 - 增量升级
在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略。