微前端架构介绍

1. 微前端定义

微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一个的应用。 简单的说：微前端就是在一个Web应用中独立运行其他的Web应用。

2. 微前端特点

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

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

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

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

• 环境隔离：应用之间 JavaScript、CSS 隔离避免互相影响。

• 消息通信：统一的通信方式，降低使用通信的成本。

• 依赖复用：解决依赖、公共逻辑需要重复维护的问题。

3. 微前端的核心思想及其优势

微前端的核心思想是将前端应用按照业务模块拆分成多个独立的子应用，每个子应用可以独立开发、独立部署，最终通过微前端框架将这些子应用整合为一个完整的应用。

其主要优势有：

• 技术栈无关：每个子应用可以使用不同的前端技术栈，不影响其他子应用的正常工作。

• 独立开发与部署：子应用可以独立开发、测试和部署，降低了版本迭代的耦合性。

• 渐进式升级：在大规模系统升级时，可以逐步替换子应用而无需一次性改造整个系统。

4. 微前端主要实现方案

• iframe方案：通过将各子应用加载到不同的iframe中，实现技术栈隔离和独立渲染。该方案虽然简单，但缺点是iframe带来了多重通信、样式隔离和路由管理上的复杂性。

• 基于路由的前端整合：通过主应用控制路由，子应用在特定路由下被加载到主应用中。主应用会监听路由变化，动态加载对应的子应用。该方案优点是灵活性高，但需要自行处理各子应用的生命周期和路由切换问题。

• 基于微前端框架的方案：如 qiankun、single-spa，通过专门的微前端框架来实现应用加载、路由管理、资源隔离等。框架提供了标准化的API，简化了微前端架构的实现。

5. 微前端的样式隔离

• CSS Modules：通过为每个组件生成独特的类名，避免样式冲突。

• Shadow DOM：借助Web Components的Shadow DOM来实现样式隔离，使子应用的样式不会影响全局或其他子应用。

• 动态样式前缀：在渲染子应用时动态为其样式添加前缀，确保局部样式隔离。

6. 微前端的全局状态管理

• 自定义事件：各子应用之间通过自定义事件进行通信和状态传递。

• 全局状态库：利用Redux或自定义的状态库，在父应用中管理全局状态，子应用通过发布订阅模式与全局状态进行交互。