微前端是一种软件架构，将每个应用以模块化的形式进行划分使之能够独立(与框架无关)开发部署的微型应用然后在讲这些微应用进行组合使其称为整体应用的架构模式.
一般用于解决不同技术栈协同开发的场景:
- 对举行项目的拆分,对于当下新技术最小代价升级
- 兼容历史应用，实现增量开发
架构实现
应用组合
多个微应用注册于容器应用中,通过模块化的方式被容器应用启动和运行，此种方式可以防止不同微应用在同时运行时发生冲突
微应用路由
当路由发生改变时容器应用首先会拦截路由的变化，根据路由匹配微前端应用启用对应微应用加载对应模块资源
跨组建通讯
通过rx.js方式或者全局事件注册器订阅发布
公共库共享
- 通过
import-map或构建工具的externals属性 - 模块联邦通过抽离独立模块并通过
shared共享
解决方案
常见的模式下使用最多的可能就是webpack的模块联邦和single-spa应用，这里总结对比下各自的优缺点
module-federation
- 优点: 像构建单个
chunk一样对待应用，和webpack构建本身一样足够灵活、解耦尽可能的复用 - 缺点: 构建工具依赖于
webpack(构建速度)的同时因为运行时动态加载模块，在不同环境下会导致版本冲突等一致性问题
single-spa
- 优点: 架构更加灵活，单个应用技术栈不限制，更多的函数化应用概念(
parcel)应用之间可跨框架共存,且应用加载只包含所需代码加载速度更快 - 缺点: 因为每个应用都是独立且框架不可知的，对于公共
vendor抽离及复用需要根据场景自定义设计编写
总结
如果团队已经统一框架，对技术栈没有过多要求推荐使用module fedetation,否则需要更灵活的架构及技术栈之间的相互引用和互相操作则推荐使用single-spa.