微前端概况
# 简介
微服务是面向服务架构（SOA）的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来
具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理；
# 优势
- 独立技术栈：主框架不限制接入应用的技术栈，每个应用的技术栈选型可以配合业务团队选择；
- 独立开发、独立部署：子应用仓库独立，前后端可独立开发，部署完成后主框架同步更新子应用；
- 独立运行：每个子应用之间状态隔离，单独子应用失败不会影响到其他项目；
- 数据共享：子应用可以共享主应用数据，亦可共享兄弟应用数据；
# 劣势
技术团队有没有能力对新架构兜底
- 独立模块应用独立部署
- 多技术栈的接入
- 解决多应用之间的样式隔离与通用、数据隔离与通信
- 多团队开发是否保持正常协作
业务是否高度集中、庞大到需要拆分独立业务
没有耦合的业务或者过小的业务，走微服务反而是一种负担
团队是否存在多个技术栈，并且不能够统一
- 没有统一的技术栈，项目基础样式，架构都会存在差异
- 项目管理交接会存在难度
- 整体研发成本反而增加
# 接入场景
项目技术栈过于老旧,相关技能的开发人员少,功能扩展吃力,重构成本高,维护成本高；
通过微服务拆分将项目拆分掉，渐进式重构、重写、迭代后期功能；
项目过于庞大，开发，部署效率底下，且出现问题，造成全局崩盘，不好维护；
项目组存在不同技术栈，但是需要接入同一套主系统中；
# 模式对比
微服务简单点来说就是将一个大综合的 Bundle 拆成多个子 Bundles，再通过父级容器加载各个子 Bundle，达到想要的拆包，合包效果；
# 实现分类
# 图示分类
# Bundle 集成
# 构建时集成
- 将子应用单独发布 npm 包，以依赖包的形式，引入到主工程
- 采用 git submodule 的形式，引入主工程
构建时集成最大的问题是会在发布阶段造成耦合，每一个子版本的修改，都会导致整个工程需要重新编译构建，从能效上考虑，不是首推选项。优化后可以考虑分包处理方式；
# 运行时集成
iframe 引用
优势：iframe 天生自带样式、数据隔离
劣势：原生的隔离性，意味着很难把应用的各个部分联系到一起，路由控制、历史栈管理、深度链接（deep-linking）、响应式布局等都变得异常复杂，因而限制了 iframe 方案的灵活性；
老壶新酒，还是很好用的，在超级复杂的且上线时间极短的情况下，直接冲鸭，别犹豫
路由 + js bundle
- 使用的是 Single—Spa + SystemJS 构建的微服务;
- umijs + qiankun 生态圈不错的，react 技术栈的可以考虑下;
Web Components
每个子应用封装成自定义 HTML 元素（而不是前端路由方案中的渲染函数），以获得Shadow DOM带来的样式隔离等好处；
# Iframe
iFrame 是微前端集成的最简单方式之一。可以说iFrame 里的页面是完全独立的，而且iFrame 页面中的静态资源（js、css）都是相互隔离的，互相不干扰，相当于一个独立的环境，具备沙箱隔离，可以让前端应用之间可以相互独立运行，
但是IFrame局限性也很大，主要包括以下几点👇：
- 子项目需调整，需要隐藏自身页面中的导航（公共区域）；
- iFrame嵌入的视图控制难，有局限性；
- 刷新无法保存记录，也就意味着当浏览器刷新状态将消失，后退返回无效
- iframe 阻塞主页面加载；
# Nginx路由分发
通过配置nginx的location来制定不同路由映射的静态资源访问路径，将多个子项目聚合成一体，来配置不同路由的转发代理；
这种通过nginx路由分发也有局限性：
- web应用之间的复用性差，每个应用都是独立的，无法共享数据和资源；
- 每个独立的项目之间切换，需要重新加载，容易出现白屏影响用户体验；
# Single-spa
官方号称“一个用于前端微服务化的JavaScript前端解决方案”，single-spa 听起来很高大上，它能兼容各种技术栈，并且在同一个页面中可以使用多种技术框架(React, Vue, Angular等任意技术框架)，不用考虑因新的技术框架而去重构旧项目的代码
大概的原理是，首先需要一个主应用（容器应用），需要先注册子应用，然后当url匹配到相应的子应用路由后，将会先请求子应用的资源，然后挂载子应用，同理，当url切换出该子应用路由时，将卸载该应用，以此达到切换子应用的效果，通过子应用生命周期boostrap（获取输出的资源文件） 、 mount、unmount的交替
聊聊Single-SPA 的优点：
- 各项目独立开发、部署、迭代，互不影响效率高
- 开发团队可以选择自己的技术并及时更新技术栈。
- 相互之间的依赖性大大降低
- 有利于CI/CD,更快的交付产品
# Qiankun
qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统；