简单聊聊微前端

什么是微前端?

微前端是一种前端架构模式，它将一个庞大的前端应用拆分为多个独立、小型的应用，这些小型应用可以独立开发、独立运行、独立部署，但对用户而言，它们仍然是一个统一的整体。这种架构模式主要是为了解决传统单体应用在大型项目中遇到的问题，如代码冗余、开发效率低下、部署风险高等。

为什么要用微前端？

1. 模块化与解耦：

     微前端强调模块化，每个微应用都是一个独立的模块，这使得代码更加清晰、易于维护。

     通过将前端应用拆分为多个独立的子应用，可以实现业务逻辑的解耦，降低系统的复杂性。

2. 提高开发效率：

     微前端架构允许不同团队并行开发各自的微应用，从而缩短了开发周期。

     由于微应用可以独立部署，因此无需等待其他团队的开发进度，即可快速上线新功能。

3. 降低部署风险：

     在传统的单体应用中，每次部署都涉及整个应用的更新，风险较高。而微前端架构下，每次只需部署更新的微应用，降低了部署的风险和影响范围。

4. 技术栈灵活性：

     微前端架构不限制接入的微应用的技术栈，这意味着团队可以根据自身需求和技术储备选择合适的技术栈进行开发。

     这种灵活性有助于团队尝试新技术、保持技术栈的更新和多样性。

5. 渐进式重构与升级：

     对于遗留系统或大型项目，微前端提供了一种渐进式重构和升级的策略。通过逐个替换或升级微应用，可以逐步实现整个系统的现代化改造。

6. 更好的用户体验：

     微前端架构有助于优化前端性能，如减少首次加载时间、提高页面响应速度等，从而提升用户体验。

     通过动态加载和卸载微应用，可以实现更细粒度的资源管理和优化。

行业解决方案？

1. 基于路由分发的微前端方案：

     这种方案通过配置路由来分发请求到不同的微应用。每个微应用可以独立开发、测试和部署，而在用户看来仍然是内聚的单个产品。此方案的优点包括简单、快速和易配置，但可能在切换应用时触发浏览器刷新，影响体验。

2. 基于iframe的微前端方案：

     iframe作为一种古老的技术，可以轻松地从独立的子页面构建页面，提供天然的隔离性。这种方案的优点是实现简单、技术不限制，但缺点是可能存在Bundle大小各异、SEO不友好、URL状态不同步、DOM结构不共享以及全局上下文完全隔离等问题。

3. 基于Web Components的微前端方案：

     Web Components是浏览器的原生组件，允许创建可重用的用户界面小部件。这种方案的优点包括技术栈无关、独立开发和应用间隔离。然而，由于Web Components的浏览器和框架支持不够广泛，可能需要更多的polyfills，且重写现有的前端应用和系统架构可能较为复杂。

     MicroApp：

       特点：由京东出品，基于WebComponent的思想实现的微前端框架。它轻量、高效，且提供了js沙箱、样式隔离、元素隔离、预加载等一系列完善的功能。

       优势：使用起来成本较低，不需要修改子应用的渲染逻辑或webpack配置，接入微前端成本较低。此外，它无任何依赖，体积小巧，扩展性高。

       适用场景：适合需要快速集成不同技术栈子应用的项目。

4. 基于Module Federation的微前端方案：

     Module Federation是webpack5新增的功能，可以帮助将多个独立的构建组成一个应用程序。这种方案的优点包括开箱即用、独立开发与部署、去中心化和组件共享。但缺点是可能无法提供沙箱隔离、技术单一（仅限使用webpack5以上版本）、代码封闭性高以及拆分粒度需要权衡。

     EMP（Esm Module Federation）：

       特点：基于Webpack 5 Module Federation特性进行二次封装，特别优化了对ESM（ECMAScript Modules）的支持。它允许多个应用共享模块，子应用可以在不重新构建的情况下被主应用加载和使用。

       优势：完全支持ESM模块系统，减少模块解析开销，提高加载效率。相比原生的Module Federation，EMP配置更简便。

       不足：学习曲线存在，虽然配置简化，但依然需要掌握Module Federation的核心概念。此外，技术栈有限制，需要使用Webpack 5，且社区支持相对较少。

5. 中心基座方案（如qiankun等）：

     中心基座方案是目前主流的微前端采用的技术方案之一。

     qiankun：

     基于single-spa进行二次开发，提供了更加开箱即用的API、样式隔离、JS沙箱和资源预加载等功能。这种方案的优点是技术栈无关、易于集成和管理微应用，但可能需要注意沙箱隔离的完善性和性能优化。

     Single-spa：

       特点：Single-spa是最早的微前端框架，它允许多个前端框架应用（如Vue、React、Angular）同时工作在同一个页面上。每个子应用可以使用不同的框架，技术栈灵活。

       优势：提供了依赖共享机制，避免多个应用加载相同的依赖包，且生态完善，有丰富的社区插件和工具支持。

       不足：学习曲线较陡峭，配置较为复杂，需要专门学习，且在同时加载多个子应用时性能可能受影响。

     Garfish：

       特点：字节跳动推出的微前端框架，专注于轻量级和高性能的解决方案。它无需复杂的配置即可使用，适合快速开发，且支持多种前端框架。

       优势：性能优越，适合对速度有要求的项目。同时提供了技术栈无关的支持，灵活性高。

       不足：相对于其他成熟的微前端方案，Garfish的社区支持和文档相对较少，且在某些复杂场景下可能需要额外的开发工作。

6. 自由框架组合模式