图片

作者 | Rafal Gancarz

译者 | 明知山

策划 | Tina

Expedia 通过对其 Web 和移动应用程序应用一系列优化措施，使航班搜索速度提升了 52%（页面可用时间）。为了支持这些改进措施，Expedia 提升了其应用程序的可观察性。Expedia 的 Flights Web 应用程序改成了微前端架构（MFA），以实现灵活性和可重用性，实现更好的优化。

航班搜索占了 Expedia 用户流量的很大一部分。由于无法直接控制第三方 API 的延迟，因此 Expedia 决定优化网络调用和自己的 渐进式 Web 应用程序 (PWA) 来提升用户体验。

开发团队改进了前端和后端组件的可观察性，为性能优化提供支持。工程师们跟踪了多个指标，包括页面可用时间（React 组件的加载时间）、非供应开销（总体后端调用延迟，不包括第三方 API 调用）、首次内容绘制（FCP）、可交互时间（TTI） 等等。

图片

降低延迟（来源：Expedia 技术博客)

改变 Expedia Flights PWA 结构的一个基础步骤是采用了 微前端架构（MFA）。开发团队将应用程序拆分为独立的可共享包，这样做可以更好地实现代码所有权控制、灵活性、可重用性和包级别的优化。此外，开发团队使用 GitHub Actions 实现强制执行包大小限制的 Git 提交钩子，倡导使用小体积包，这对于在较慢的网络条件下提升用户体验来说至关重要。

GraphQL 查询优化，包括水平和垂直切片以及异步查询执行，大幅度降低了延迟。开发人员不再使用单个昂贵的、用于获取包含大量搜索结果组合的 GraphQL 查询，而是使用一系列较小的查询按照块的方式获取价格列表。此外，获取价格详情被放在单独的查询中，仅在用户选择查看详情时执行。

其他的改进还包括预取 JavaScript 和 CSS 静态资源，根据在主页上选择的搜索条件预先执行航班搜索，并从基于 Apache Cassandra 构建的后端缓存层中检索搜索结果。在应用了这些增强措施后，开发团队发现页面可用时间缩短了 52%，非供应开销减少了 40%。

InfoQ 采访了 Expedia 的软件工程师 Heena Gupta****，问了几个与航班搜索优化相关的一些问题。

InfoQ：你在航班搜索应用程序的响应性方面做出了令人印象深刻的改进。项目中最具挑战性的地方在哪里？

Heena Gupta： 感谢你的称赞！最开始我们针对 Flights 的架构进行了头脑风暴，找出需要改进性能的潜在领域。在确定了需要改进的领域后，我们开始与不同的团队合作，这样有助于加快设计讨论。我们面临的另一个挑战是金丝雀自动化，在性能下降时自动发出警报，并确保尽可能减少噪音警报。

InfoQ：GraphQL 和微前端架构（MFA）在行业内正在得到广泛采用。对于考虑采用这些解决方案的团队，你有什么建议？

Heena Gupta： GraphQL 在充当前端和后端之间的契约方面发挥非常大的作用。在使用 GraphQL 时，开发人员经常会传递冗余的片段，这使得 Apollo 响应的有效载荷变得更大。关键在于要提供消费平台实际需要的那些 GraphQL 节点。在设计 GraphQL 模式时要考虑如何使模式标准化，实现通用的可重用性。微前端架构确实有助于改进前端架构。虽然微前端架构有助于高效地编写每个子模块的代码，但包所有者的数量也会增加，并且需要独立维护每个模块。然而，可以自由独立编写每个模块的代码确实是微前端架构的优势。

查看英文原文：

https://www.infoq.com/news/2024/03/expedia-graphql-micro-frontends/

声明：本文由 InfoQ 翻译，未经许可禁止转载。

今日好文推荐

AI 手机来了，App 将消亡，前端开发范式变了！

Vue 的响应式机制就是个“坑”

李彦宏“程序员将不再存在”言论被周鸿祎驳斥，网友怒怼：先把百度程序员都开除了！

生成式 AI，前端开发的终结者？无障碍组件告诉你：NO！

活动推荐

探索软件开发的新境界！QCon 全球软件开发大会迎来全新升级，现已华丽转型为【QCon 全球软件开发大会暨智能软件开发生态展】。这不仅是一场技术盛宴，更是深度交流与创新展示的交汇点。我们诚邀您于 2024 年 4 月 11 日至 13 日，莅临北京·国测国际会议会展中心，共同见证并参与这场融合技术分享、深度研讨与前沿展览的综合性盛会。让我们携手开启智能软件开发的新篇章！

图片

QCon 精华内容上线 92%，全面覆盖“人工智能 +”的典型案例！今天是会议 9 折购票倒计时阶段，最后 5 天，联系票务经理 17310043226 。查看「阅读原文」可了解大会最新日程，期待与各位开发者现场交流。