什么是微前端

微前端是一种将大型前端应用拆分成多个小型、独立、可复用的前端应用的方法。这些小型应用可以独立开发、部署和更新，同时又能无缝集成在一起，形成一个完整的应用。微前端的核心思想是将前端应用拆分成多个小型、独立的部分，每个部分都可以独立开发、部署和更新，同时又能无缝集成在一起，形成一个完整的应用。

比如说：

• 一个大型电商平台，可以拆分成多个小型应用，如商品展示、购物车、订单管理等。
• 一个大型企业内部管理系统，可以拆分成多个小型应用，如人事管理、财务管理、项目管理等。

微前端的优势

1. 独立开发与部署：每个微前端应用可以独立开发、部署和更新，不需要等待其他应用的完成。这可以加快开发速度，提高开发效率。团队也可以选择最适合的技术栈。

2. 独立团队协作：每个微前端应用可以由独立的团队负责开发，每个团队可以独立工作，不需要与其他团队协调。这可以促进团队协作，提高开发效率。

3. 渐进式迁移：微前端可以逐步将现有的单体应用拆分为微应用，而不需要一次性重构整个应用。渐进式的迁移方式降低了风险，提高迁移的成功率。

4. 灵活部署：每个微应用可以独立部署，更新某个微应用不会影响到其他部分。这种灵活性使得应用的维护和更新变得更加高效。

5. 可拓展性：微前端架构可以轻松地添加新的微应用，也可以轻松地移除旧的微应用。这使得应用可以随着业务的发展而不断扩展。

6. 可维护性：微前端架构使得每个微应用都可以独立维护，降低了代码的复杂度，提高了代码的可维护性。

微前端注意点

1. 共享组件与样式

   • 使用共享的组件库和样式指南，以保持用户体验的一致性。
   • 可以使用设计系统或 UI 组件库来实现，确保各个微应用在视觉和交互上保持一致。

2. 路由管理

   • 需要一个统一的路由管理器来处理微应用的加载和导航。
   • 可以使用 single-spa、qiankun 等微前端框架来管理路由。

3. 状态管理

   • 需要一个统一的状态管理器来管理微应用之间的状态共享。
   • 可以使用 Redux、MobX 等状态管理库来实现。

微前端的技术方案

1. iframe

iframe 是一种将一个网页嵌入到另一个网页中的技术。它可以将一个微前端应用嵌入到另一个应用中，从而实现微前端的效果。

优点：

• 实现简单，不需要额外的框架或库。
• 可以独立开发和部署微应用。
• 可以实现微应用的隔离，防止微应用之间的相互影响。

缺点：

• URL 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
• UI 不同步，DOM不会共享，iframe中弹窗之类的操作无法覆盖主页面。
• 全局上下文完全隔离，内存变量不共享。登录信息、cookie 等信息无法共享。
• 加载慢，影响用户体验。每次进入都是一次浏览器上下文重建、资源重新加载的过程。

使用示例

<iframe src="https://example.com/micro-frontend?param1=value1&param2=value2" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>

如上，我们可以通过 URL 参数传递数据给微应用。

2. single-spa

官网：https://single-spa.js.org/

Single-spa 是一个微前端框架，允许开发者将多个前端应用程序（通常称为“微应用”）组合在一起。它支持多种框架（如 React、Vue、Angular 等），并允许这些框架的应用程序在同一个页面中共存。

特点：

• 框架无关：可以与不同的前端框架一起使用。
• 路由管理：通过配置路由来加载和卸载微应用。
• 灵活性：开发者可以选择何时加载微应用，支持按需加载。

3. qiankun

官网：https://qiankun.umijs.org/zh

Qiankun 是一个基于 Single-spa 的微前端框架，旨在提供更简单的 API 和更好的开发体验。它是由蚂蚁金服团队开发的，专注于解决微前端开发中的一些常见问题。

特点：

• 易用性：提供了更简单的 API，使得微前端的集成和管理更加方便。
• 主应用和子应用：支持主应用和子应用的概念，主应用负责加载和管理子应用。
• 样式隔离：提供了样式隔离的机制，避免不同微应用之间的样式冲突。
• 支持多种框架：同样支持多种前端框架的微应用。