我们是如何将 GrabFood.com 的页面 JavaScript 资产大小减少 3 倍的？

Every week, GrabFood.com’s cloud infrastructure serves over >1TB network egress and 175 million requests, which increased our costs. To minimise cloud costs, we had to look at optimising (and reducing) GrabFood.com’s bundle size.

每周，GrabFood.com 的云基础设施为超过 1TB 的网络出口和 1.75 亿个请求提供服务，这增加了我们的成本。为了最大限度地降低云计算成本，我们不得不考虑优化（和减少）GrabFood.com 的数据包大小。

Any reduction in bundle size helps with:

捆绑规模的任何减少都有助于。

Faster site loads! (especially for locations with lower mobile broadband speeds)
更快的网站加载!(特别是对于移动宽带速度较低的地方)
Cost savings for users: Less data required for each site load
为用户节省成本。每个站点负载所需的数据更少
Cost savings for Grab: Less network egress required to serve users
为Grab节省成本：为用户服务所需的网络出口更少
Faster build times: Fewer dependencies -> less code for webpack to bundle -> faster builds
更快的构建时间。更少的依赖性 -> 更少的代码供webpack捆绑 -> 更快的构建速度
Smaller builds: Fewer dependencies -> less code -> smaller builds
更小的构建。更少的依赖性 -> 更少的代码 -> 更小的构建

After applying the 7 webpack bundle optimisations, we were able to yield the following improvements:

在应用了7个webpack bundle优化后，我们能够产生以下改进。

7% faster page load time from 2600ms to 2400ms
页面加载时间加快7%，从2600ms到2400ms
66% faster JS static asset load time from 180ms to 60ms
JS静态资产加载时间提高66%，从180ms到60ms
3x smaller JS static assets from 750KB to 250KB
将JS静态资产从750KB缩小到250KB的3倍
1.5x less network egress from 1800GB to 1200GB
从1800GB到1200GB，网络出口减少1.5倍
20% less for CloudFront costs from $1750 to $1400
CloudFront费用减少20%，从1750美元降至1400美元
1.4x smaller bundle from 40MB to 27MB
1.4倍小的捆绑包，从40MB到27MB
3.6x faster build time from ~2000s to ~550s
构建时间加快了3.6倍，从~2000s到~550s

Solution

解决方案

One of the biggest factors influencing bundle size is dependencies. As mentioned earlier, fewer dependencies mean fewer lines of code to compile, which result in a smaller bundle size. Thus, to optimise GrabFood.com’s bundle size, we had to look into our dependencies.

影响软件包大小的最大因素之一是依赖性。如前所述，较少的依赖关系意味着需要编译的代码行数较少，从而导致捆绑的大小较小。因此，为了优化 GrabFood.com 的软件包大小，我们必须研究我们的依赖关系。

Tldr;

Jump to Step C: Reducing your Dependencies to see the 7 strategies we used to cut down our bundl...