# 什么叫微前端

微前端是一种类似微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由当一的单体应用 转变为把多个小型前端应用聚合为一的应用

微前端是指将多个前端应用以某种形式结合到一起，当系统中存在多个前端应用（或者当个前端应用模块过大） 时，就需要考虑到用微前端的方式来拆分。此外，还需要做一系列的技术决策来支持应用的整合。

# 特点

• 应用自治

微前端架构，是多个应用组件的统一应用，这些应用可以由多个团队来开发。要遵循统一的接口规范框架，以便 集成统一到一起，因此相互之间是不存在依赖关系。我们可以再适当的时候替换其中任意一个应用，而不是整体 。这也意味着，我们可以使用各式各样的前端框架，而不会相互影响。

• 单一职责
• 技术栈无关

# 为什么需要微前端

• 遗留系统迁移
• 聚合应用
• 热闹驱动开发

# 微前端的拆分方式

从技术实践上，微前端架构可以采用以下几种方式进行

• 路由分发式：通过HTTP服务器的反向代理一个功能，将请求路由到对应应用上
• 起那段微服务化：在不同的框架上设计通信和加载机制，以一个页面内加载对应的应用
• 微应用：通过软件工程的方式，在部署构建环境中把多个独立的应用组合成一个单体应用
• 微件化：开发一个新的构建系统，将部分业务功能构建成一个独立chunk代码，使用时只要远程加载即可
• 前端容器化：将iframe作为容器容纳其他其前端应用
• 应用组件化：借助web components技术构建跨框架前端应用

# 微前端的业务拆分

• 按照业务拆分
• 按照权限拆分
• 按照变更频率拆分
• 按照组织结构拆分
• 跟随后端拆分

# 构建微前端基础设施

• 组件与模式库：应用间提供通用的UI组件，共享业务组件，以及相应的通用函数模块；
• 应用间通信：设计应用间通信机制，并提供相应的底层库支持
• 数据共享机制：对通用的数据，采取一定的策略来缓存数据，而不是每个应用当度获取自己的数据
• 专用的构建系统：在某些微前端的实现里，如微件化，构建系统用于构建出每个单独的应用，有可以构建 出最后的一整个应用

# 微前端架构模式

• 基座模式
• 自组织模式

# 为什么不是 iframe

为什么不用 iframe，这几乎是所有微前端方案第一个会被 challenge 的问题。 但是大部分微前端方案又不约而同放弃了 iframe 方案，自然是有原因的，并不是为了 "炫技" 或者刻意追求 "特立独行"。

iframe 最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。 但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题。

• url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
• UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏*览器 resize 时自动居中..
• 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
• 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。