微前端是什么

微前端是一种架构，将微服务的理念应用与浏览器端。 一个微前端应用由多个小型前端应用组合在一起的应用， 每个小型应用可以单独的开发、单独运行、单独部署。微前端是一种架构体系，并不局限于应用所使用的技术栈

解决了什么问题

单页面应用是项目开发的形态之一，但是随着时间的推移及应用功能的复杂度，单页面应用变得越来越庞大，并且难以维护，所以微前端在此的意义就是将庞大的应用进行拆分，随之解藕，每个模块单独的进行维护和部署，提升效率

在一些历史应用中，这些项目大多用的老框架，想要升级到现在技术栈需要的时间和精力很多，还不能抛弃，微前端可以将这些系统整合，在基本不修改逻辑的同时，兼容新老两套系统并行运行。

不限技术栈，不管使用的框架还是原生js写的应用，都可以集成到微前端中来。

技术栈升级，循序渐进的对应用模块逐渐升级，不影响其他模块的正常工作

在浏览器平台如何使用

微前端实现方案：

方案 实现描述 优点 缺点
nginx路由转发 通过nginx配置代理，根据不同的url映射到不同的应用
1. 实现简单
1. 不需要对现有应用进行改造
1. 无关技术栈
1. 每次切换应用时浏览器都需要重新加载页面
1. 多个字应用无法并存
1. 通信困难，状态无法共享，页面状态无法保留
iframe 内嵌式，可以狠方便的将一个应用嵌入到另一个应用中
1. 实现简单
1. css和js天然隔离
1. 无关技术栈， 不需要改造现有应用
1. 每次需要重新加载页面
1. UI不同步，DOM结构不共享，页面状态不保留
1. 全局上下文完全隔离，切换子应用时可能需要重新登录
1. 数据同步只能通过messageChannel
web components 每个子应用采用web components技术编写组件，是一套全新的开发模式，由于template、shadow dom的天然隔离，是最原始的实现，很大一部分模版代码可以在js中编写，加载时只需要执行js即可
1. 每个子应用可以天然的隔离css
1. 天然的隔离机制，模版和Element构建
1. js没有隔离，全局使用一个上下文，但是可以采用沙箱机制来做限制
1. 个应用之间通信比较复杂，或每个子应用单独注册，或者依赖于messageChannel
组合式应用路由分发 每个子应用单独构建、部署，运行时由基座应用进行路由管理，应用加载、卸载、事件通信的调度
1. 纯前端改造，体验良好
1. 可无感知切换， 由于自己实现的隔离机制，子应用js、css相互隔离
1. 需要设计和开发，由于存活的应用同时存在一个作用域，需要自己实现隔离，变量污染，通信机制等要点
webpack5: module federation 基于webpack5提供的一个新特性，模块联邦可以在一个js应用中动态加载并运行另一个js应用代码，并实现应用之间的依赖共享
1. 不需要对原有应用进行改造，只需要改动webpack配置文件
1. 需要重新加载页面
1. 多个子应用并存
1. 无关技术栈
1. 首次启动无需加载于本身应用无关的资源
1. 只能依赖于webpack5
1. 对老项目不太行，webpakc改造困难