用Metro更快地构建JavaScript

How Airbnb migrated from Webpack to Metro and made the development feedback loop nearly instantaneous, the largest production build 50% faster, with marginal end-user runtime improvements.

Airbnb如何从Webpack迁移到Metro，并使开发反馈循环几乎瞬间完成，最大的生产构建速度提高了50%，终端用户的运行时间也有了边际改善。

By: Rae Liu

Introduction

简介

In 2018, the frontend Airbnb infrastructure relied on Webpack for JavaScript bundling which had served us well up until then; however, with our codebase almost having quadrupled in the previous year, the frontend team was noticing a significant impact on the development experience. Not only was build performance slow, but the average page refresh time for a trivial one-line code change was anywhere between 30 seconds and 2 minutes depending on the project size. In order to mitigate this, the team decided to migrate to Metro.

在2018年，Airbnb的前端基础设施依靠Webpack进行JavaScript捆绑，这在此前一直为我们提供良好的服务；然而，随着我们的代码库在过去一年中几乎翻了两番，前端团队注意到开发体验受到了重大影响。不仅构建性能缓慢，而且根据项目的大小，一个微不足道的单行代码修改的平均页面刷新时间在30秒到2分钟之间。为了缓解这一问题，该团队决定迁移到Metro。

Thanks to the switch to Metro, we’ve improved our build performance. In development, the time it takes for a simple UI change to be reflected and loaded (Time to Interactive TTI metric) is 80% faster. The slowest production build compiling ~49k modules (JavaScript files) is 55% faster (down from 30.5 minutes to 13.8 minutes). As an added bonus, we’ve observed improvements in the Airbnb Page Performance Scores by ~1% for pages built with Metro.

由于切换到Metro，我们的构建性能得到了改善。在开发中，一个简单的UI变化被反映和加载的时间（交互时间TTI指标）快了80%。最慢的生产构建编译~49k模块（JavaScript文件）的速度提高了55%（从30.5分钟下降到13.8分钟）。作为额外的奖励，我们观察到使用Metro构建的页面的Airbnb页面性能得分提高了约1%。

Scaling issues with JavaScript bundlers certainly isn’t a unique problem to Airbnb. In this blog post, we want to highlight the key architectural differences between Webpack and Metro as well as some of the migration challenges we faced in both development and production builds. If you anticipate one of your own projects to scale up significantly in the future, we hope this post can provide useful insights on solvin...