跟后端的微服务相对应
微服务:微服务允许后端体系结构通过松散耦合的代码库进行扩展,每个代码库负责自己的业务逻辑,并公开 API,每个 API 均可独立部署,并且各自由不同的团队拥有和维护。
微前端解决的问题
减少团队间的等待时间,各项目之间相互独立部署
技术栈无关
可独立开发、部署
增量升级
独立运行时
解决方案
iframe
single-spa
web component
webpack5 模块联邦
微前端框架
- qiankun
- micro-app
- 无界
集成了页面,还有一大堆事情要做:
- CSS 样式隔离:不同项目,相同的样式名在页面中是会相互污染的
- js 隔离:不同项目,在向 window 挂在变量时,有可能会互相污染
- 路由状态:子应用的路由改变需要同步到主应用上
- 通信方式:子应用之间互相通信也是必不可少的,要尽量解耦不要互相调用。
- 预加载:利用用户浏览空闲时间,提前加载其他项目的 JS 文件,提高用户体验