了解微前端

什么是微前端

        微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

开发模式

        微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web应用的技术手段及方法策略。

        微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，这样才能确保微应用真正具备独立开发、独立运行的能力。 

微前端架构具备以下几个核心价值：

• 技术栈无关
  主框架不限制接入应用的技术栈，微应用具备完全自主权

• 独立开发、独立部署
  微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

• 增量升级

  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

• 独立运行时
  每个微应用之间状态隔离，运行时状态不共享

        微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。

微前端劣势

• 重复依赖
  不同应用之间的依赖包有可能会存在很多重复的，由于各应用独立开发，编译、部署，难免会出现重复依赖，不同应用之间重复下载依赖，额外再增加了流量和服务端压力

• 技术成本变高
  一个问题的跟踪，有可能需要对应的人员，懂微前端，又懂主应用和子应用，可能需要同时深入了解微前端和react和vue才能解决问题，复杂度由代码转向基建

• 没有健全的前端周边让其充分发挥架构的优势

微前端架构方案:

        自由组织模式、基座模式、去中心模式

常见的微前端方案

基于iframe完全隔离的方案

优点:

• 简单无需任何改造

• js和css都是独立的运行环境

• 不限制使用，可放多个iframe来组合业务

缺点:

• 刷新后路由状态丢失，无法保持路由状态

• 完全的曝高导致通讯交互困难，只能采用postMessage方式，全局上下文完全隔离，内存变量不共享，iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到提域名都不同的子成用中实现免登效果

• iframe中的弹窗无法突破其本身

• 整个应用全量资源加载，加载太慢

基于single-spa路由劫持方案

        通过劫持路由的方式来做子应用之间的切换，（监听url的变化动态加载资源）但接入方式需要融合自身的路由，有一定的局限性，且上手成本高

阿里qiankun

        giankun基于single-spa做的封装，通过import-htm-entry 包解析 HTML 获取资源路径，然后对资源进行解析、加载。
优点:

• 基于single-spa封装，提供了更加开箱即用的API

• 接入微应用像接入iframe一样简单

• 样式隔离，确保微应用之间样式互不打扰

• js沙箱，确保微应用之间全局变量/事件不冲突

• 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度

缺点:

• qiankun只能解决子项目之间的样式污染，无法阻止子项目的样式污染主项目的样式

京东micro-app方案

        micro-app借鉴了WebComponent的思想，通过CustomElement结合自定义的 ShadowDom，将微前端封装成一个类 webComponents 组件，从而实现微前端的组件化渲染