什么是微前端
概念
微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。
核心目标
微前端的核心目标是将巨石应用拆解成若干可自治的松耦合微应用。
应用场景
商业产品设计，一个大的商业产品，开发过程中拆分微前端架构来设计，可以将大系统拆分微独立的各种子模块。在进行产品销售过程中可以根据用户的需求来选中哪些业务打包组合。
一个庞大的业务，可能分包给不同的团队开发，技术栈不统一的情况下，我们可以采用微前端来进行项目融合。保证项目业务是完善的。
微前端架构里面可以包含很多业务、H5端、PC端业务、数据可视化平台等等。
因为微前端理念是不限制技术，不限制框架。
微前端架构具备以下几个核心价值：
-
技术栈无关
主框架不限制接入应用的技术栈，微应用具备完全自主权 -
独立开发、独立部署
微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新 -
增量升级
在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
-
独立运行时
每个微应用之间状态隔离，运行时状态不共享
微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
目前微前端主流方案
一般大型互联网公司都有一套自己的微前端解决方案。
我们不针对哪家公司的架构讨论，我们主要说一下主流方案
基于iframe完全隔离的方案
iframe在一个应用中可以独立运行另一个应用，这种方案我们在html中可以使用。因为他是两个独立的容器。
特点：
- 用法简单，一个标签就可以解决问题
- 完美隔离，JS、CSS 都是独立的运行环境
- 不限制使用，页面上可以放多个 iframe 来组合业务
缺点：
- 无法保持路由状态，刷新后路由状态就丢失
- 完全的隔离导致与子应用的交互变得极其困难，想要各个应用进行通信，需要提出很多其他解决方案
- 整个应用全量资源加载，加载太慢，进入程序就要加载所有的应用。
single-spa路由劫持方案
Single SPA 推荐 动态模块加载 的方式来搭建微前端架构，主应用作为一个纯净的“加载器”，仅提供一个基础 HTML 页面，配合 SystemJS 的 importMap 特性来加载微应用，所有微应用的注册以及版本管理通过 import-map.json 文件来控制。
其实我们Vue和React开发思想就是基于single-spa的方式，结合H5的history来进行路由映射和访问
京东micro-app方案
京东 micro-app 并没有沿袭 single-spa 的思路，而是借鉴了 WebComponent 的思想，通过 CustomElement 结合自定义的 ShadowDom，将微前端封装成一个类 webComponents 组件，从而实现微前端的组件化渲染。
QianKun
蚂蚁开源的微前端框架。真正意义上的单页微前端框架，基于single-spa封装
umi内置了qiankun框架。
