导读

我如何在公司中实施微前端？您有什么建议？在本次讨论中，您将获得这些常见问题的答案。了解构建有效的前端分布式系统所需的关键特征。同时，基于真实案例学习开发微前端的最佳实践和工具。

演讲精华

以下是小编为您整理的本次演讲的精华。

在不断演进的分布式系统领域，过去十年见证了一场显著的转变，后端采用了微服务，前端采用了微前端，数据管理采用了数据网格。这种范式转变背后的驱动力是认识到将较大的问题分解为更小、更易于管理的组件，可以让不同的团队独立解决问题，从而提高效率和生产力。

经验丰富的解决方案架构师Luca Mezzalira强调区分组件和微前端的重要性，这个概念常常被误解。组件旨在实现可重用性，暴露可在系统里共享的属性和功能。相比之下，微前端封装了状态和领域知识，最小化了外部依赖，并赋予团队自主权。这一根本区别对于理解微前端的真正本质至关重要。

Luca概述了定义微前端的四个关键特征:1)暴露的API很少，2)具有上下文感知能力，3)不是到处重用，4)粒度更粗，通常每个视图有5-6个微前端。他给出了一个简洁的定义:“微前端是业务子域的技术表现形式，旨在通过相同或不同的技术实现独立实施，最小化代码共享，并由单一团队拥有。”

采用微前端的好处是多方面的。Luca举例说，有些公司从每月两次发布转变为每个微前端每天惊人的24次发布，实现了增量升级。去中心化是微服务的一个标志，也是推动微前端的一股力量，允许组织根据需要插拔团队，轻松添加功能。此外，微前端减少了认知负荷，使新团队成员能在数周而不是数月内开始为生产做出贡献，这在当今快节奏的软件开发环境中是一个重大优势。

Luca深入探讨了架构和组织结构之间的微妙关系，强调了去中心化思维和团队拓扑概念的必要性。2019年提出的团队拓扑理念主张精简的价值流团队专注于创造价值，由负责系统特定领域的复杂子系统团队提供支持。架构与组织之间的这种共生关系对于成功实施微前端至关重要。

为了建立一个健壮的微前端平台，Luca建议从一个虚拟团队开始，负责定义“微服务决策框架”。该框架包括四个关键决策:渲染、组合、路由和通信。通过解决这些基础方面，团队可以为可扩展和高效的微前端架构奠定基础。

Luca还建议优化单一框架，而不是拥抱“微服务无政府状态”的多框架。尽管过渡期可能需要两三个框架并存，但最终目标应该是汇聚到单一框架，确保为最终用户提供一致和连贯的体验。最小化代码共享是另一个关键方面，因为共享代码可能会引入糟糕的抽象和增加外部依赖，违背了微前端的原则。

Luca强调赋予团队独立编码、测试、部署和监控微前端的能力的重要性。这种自主权是微前端理念的基石，使团队能够拥抱精益思维，优化快速流程。

为了说明微前端在现实世界中的影响，Formula One Digital Technology的Evan Rigoni分享了一个引人入胜的案例研究。Evan的团队从今年1月到9月见证了F1 Unlocked和F1 TV的订阅和注册量增长了34%，他们将这一增长的很大一部分归功于引入了微前端。在财务方面，他们通过将工作负载从Amazon EC2转移到Amazon Fargate，实现了26%的平台成本降低，提高了资源利用效率、可持续性和节省了成本。

在用户体验方面，Formula One Digital Technology观察到网络性能提高了30%，移动网络性能提高了惊人的56%。这些改进直接影响到软件工程师，减少了认知负荷，使他们能够专注于单一微前端，独立开发、测试和部署，无需对整个平台进行回归测试。此外，更快的用户体验也意味着更快的测试执行时间，从而实现更频繁的交付。

Evan带领观众了解了Formula One从单体架构向微前端的过渡历程。最初，他们提取了内容管理功能，创建了四个胚胎状的微前端:标头、导航栏、内容区域和页脚。这为进一步探索微前端奠定了基础。

2022年，Formula One开始了一项更全面的微前端计划，确定了与单体系统依赖性最小的领域边界。订阅购买流程是第一个迁移到新架构的，利用了ECS集群和应用程序负载均衡器进行路由。

Evan概述了推动Formula One采用微前端的业务需求:更快、高并发的网站、可扩展性、优化的快速流程、现代技术栈、改善的可访问性以及更快地进行A/B和多变量测试的能力。

微前端通过独立测试和部署、更快交付变更、与设计系统完全集成、针对不同内容区域的细粒度缓存策略以及更好的可访问性支持来满足这些需求。Formula One利用亚马逊云科技服务如ECS集群、应用程序负载均衡器和CloudFront Functions来实施其微前端架构。

Evan逐步介绍了在微前端转型过程中做出的关键决策，包括确定页面结构内的领域边界、选择服务器端渲染和路由，以及确定微前端之间的通信需求。他们采用了迭代的“绞杀模式”方法，逐步将功能从遗留系统迁移到新的微前端架构。

Evan分享了一份由他们的合作伙伴Publicis Groupe提供的详细发布计划，展示了功能从单体系统到微前端的逐步迁移过程。最终架构由多个ECS集群组成，每个集群代表Formula1.com网站的一个页面，聚合了各种微前端，由应用程序负载均衡器代理，路由由CloudFront Functions处理。

为了量化性能改进，Evan展示了“最新F1新闻”页面的Web Vitals指标对比。在网络上，第一次内容渲染时间从2.0秒改善到0.8秒，速度指数从4.3降至3.0(如果移除不必要的代码则为0.6)。在移动网络上，最大内容渲染时间从8.7秒大幅降至3.2秒，速度指数从7.3降至5.2(如果移除不必要的代码则为2.2)。总体而言，Lighthouse性能分数从53提高到了令人印象深刻的83，这证明了微前端带来的显著性能提升。

Luca最后解决了一个常见的误解，即微前端会损害性能。相反，他断言通过只加载特定页面所需的代码，微前端实际上可以显著提高性能，即使在低端设备如机顶盒上也是如此。他引用了自己在一个直播体育流媒体平台上的经验，通过从单页应用过渡到微前端架构，启动时间从40秒减少到10秒。

此外，Luca将微前端定位为后端微服务的补充策略。在分布式系统中，目标是减少外部依赖并使团队能够独立运作，加速快速流程。如果一个组织在后端采用了微服务，那么在前端采用微前端就是一个自然契合的选择，促进了同样的去中心化和自主原则。

微前端还有助于减少团队的认知负荷，使他们成为领域专家。通过去中心化决策逻辑并赋予团队独立部署的权力，微前端实现了更快的部署时间和更大的所有权，与现代开发人员参与决策过程的愿望保持一致。

总之，本次会议全面概述了微前端、其优势以及Formula One Digital Technology的真实案例研究。它强调了这种架构方法对性能、团队自主权和组织敏捷性的潜在影响，将微前端定位为组织寻求拥抱分布式系统原则和培养创新与持续交付文化的有力工具。

我们正处在 Agentic AI 爆发前夜。 2025 亚马逊云科技中国峰会提出，企业要从 " 成本优化 " 转向 " 创新驱动 " ，通过完善的数据战略和 AI 云服务，把握全球化机遇。亚马逊将投入 1000 亿美元在 AI 算力、云基础设施等领域，通过领先的技术实力和帮助“中国企业出海“和”服务中国客户创新“的丰富经验，助力企业在 AI 时代突破。