LOADING

微前端

2023/12/29

跟后端的微服务相对应

微服务:微服务允许后端体系结构通过松散耦合的代码库进行扩展,每个代码库负责自己的业务逻辑,并公开 API,每个 API 均可独立部署,并且各自由不同的团队拥有和维护。

微前端解决的问题

减少团队间的等待时间,各项目之间相互独立部署

技术栈无关

可独立开发、部署

增量升级

独立运行时

解决方案

iframe

single-spa

web component

webpack5 模块联邦

微前端框架

  • qiankun
  • micro-app
  • 无界

集成了页面,还有一大堆事情要做:

  • CSS 样式隔离:不同项目,相同的样式名在页面中是会相互污染的
  • js 隔离:不同项目,在向 window 挂在变量时,有可能会互相污染
  • 路由状态:子应用的路由改变需要同步到主应用上
  • 通信方式:子应用之间互相通信也是必不可少的,要尽量解耦不要互相调用。
  • 预加载:利用用户浏览空闲时间,提前加载其他项目的 JS 文件,提高用户体验