什么是微前端
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端架构具备以下几个核心价值：
-
技术栈无关
主框架不限制接入应用的技术栈，微应用具备完全自主权 -
独立开发、独立部署
微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新 -
增量升级
在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
-
独立运行时
每个微应用之间状态隔离，运行时状态不共享
微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
single-SPA 与qiankun 实现库 对比
特点：功能比较弱 样式隔离没有解决 没有js执行隔离 仅仅 single-SPA实现了路由劫持和应用加载。
qiankun乾坤基于SPA 解决了沙箱，文件导入 ，提供了开箱即用的API 和技术栈无关、并且接入简单 像iframe一样简单
single-SPA 使用样式隔离问题解决：
1.子应用之间与子应用之间的样式隔离
2.BEM (block Element Modifier)约定的项目前缀
3.css-Modules 打包时生成不冲突的选择器名
4.shadow DOM 真正意义上的隔离
使用方式：
接入协议： 子应用必须有相关的协议 导出固定的方法，父应用去调用这些方法加载子应用， （子应用需要提供bootstrap 、mount、unmount方法）
这样可以做到和主应用完全解耦，和技术栈无关。而且是运行时 动态加载子应用。
single-SPA 安装方式 npm install single-spa-vue 或者yarn add single-spa-vue
qiankun 安装方式 npm install qiankun 或 yarn add qiankun
iframe 存在的问题，为何不用iframe?
1. 使用iframe ，iframe中的子应用切换路由时刷新数据页面就尴尬了 （状态会丢失）
应用通讯：
1.基于URL进行数据传递，但是传递消息能力弱
2.基于CustomEvent 实现通信 即：window 原生api
3.基于props主子应用间通信
4.使用全部变量、redux进行通信
总结：
single-SPA 核心 路由劫持和应用加载
qiankun 是在single-SPA基础二次封装 用起来更简单、 便捷。子应用可以独立构建，运行时动态加载主自应用完全解耦，技术栈无关 靠的是协议接入 子应用必须导出bootstrap mount unmount方法
写了两个demo,分别Single和qiankun
Single-SPA demo:https://github.com/jingjing9061/microFont
qiankun demo :https://github.com/jingjing9061/microFont2
Single-spa学习地址：https://zh-hans.single-spa.js.org/docs/getting-started-overview
qiankun 学习地址 ：https://zh-hans.single-spa.js.org/docs/getting-started-overview/