Expedia通过微前端和GraphQL优化加速航班搜索

Expedia通过一系列优化措施，使其航班搜索的页面可用时间提升了高达52%。这些优化主要针对Web和移动应用程序，并通过提升应用程序的可观测性来支持这些改进。Expedia的航班Web应用程序已迁移到微前端架构（MFA），以实现灵活性、可重用性和更好的优化。

航班搜索占据了Expedia用户流量的很大一部分。由于Expedia无法直接控制第三方API的延迟，因此决定优化网络调用和其渐进式Web应用程序（PWA）以改善用户体验。

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

Expedia航班PWA的一项根本性改变是采用了微前端架构（MFA）。团队将应用程序分解为独立的可共享包，实现了更好的代码所有权、灵活性、可重用性和包级优化。此外，团队通过Git提交钩子和GitHub Actions强制执行包大小限制，以促进小包的使用，这对改善较慢网络上的用户体验至关重要。

通过GraphQL查询优化，包括水平和垂直切片以及异步查询执行，实现了显著的延迟减少。开发者使用一系列较小的查询来分块获取搜索报价列表，而不是执行一个昂贵的GraphQL查询返回大量数据。此外，报价详情被提取到一个单独的查询中，仅在用户选择报价时执行。

其他改进包括预取JavaScript和CSS静态资源、根据主页上选择的搜索标准预先执行航班搜索，以及优化从基于Apache Cassandra的后端缓存层检索搜索结果的方式。应用所有这些增强措施后，团队观察到页面可用时间（第90百分位数）减少了52%，非供应开销（第90百分位数）减少了40%。

InfoQ采访了Expedia集团的软件工程师Heena Gupta，探讨了航班搜索优化项目的挑战和建议。

Heena Gupta表示，最初的项目挑战在于确定性能改进的潜在范围，并与跨地域团队合作加速设计讨论。另一个挑战是关于金丝雀自动化，需要自动化性能下降的警报，并尽量减少噪音警报。

Heena Gupta建议，GraphQL作为前端和后端之间的契约非常强大，但开发者在设计GraphQL模式时，应考虑如何标准化模式以实现可重用性。微前端架构有助于改善前端架构，但也会增加包所有者的数量，需要独立维护每个模块。然而，给予每个模块独立编写代码的自由是微前端架构的优势。