TechPrufer
Get started
Grab
Grab logoGrab · Feature trail

Frontend Asset Optimization

1 post · Jul 2021

What this trail covers

GrabFood.com has implemented a series of optimizations to significantly reduce JavaScript asset sizes, leading to faster page load times, reduced data costs for users and the company, faster build times, and lower cloud infrastructure expenses. These optimizations include dependency analysis, lazy loading, unifying duplicate modules, leveraging ES Modules for tree-shaking, replacing libraries with browser Web APIs, and avoiding Node.js dependencies.

All Grab trails
  1. How We Cut GrabFood.com’s Page JavaScript Asset Sizes by 3xThis post details seven strategies for reducing JavaScript bundle sizes on GrabFood.com: 1. Lazy loading large/less-used dependencies, 2. Unifying duplicate modules, 3. Using ES Modules for tree-shaking, 4. Replacing libraries with browser Web APIs, 5. Avoiding large dependencies by changing technical approach, 6. Avoiding Node.js dependencies, and 7. Optimizing external dependencies. The post provides concrete examples and code snippets for each strategy, demonstrating their impact on page load time, asset size, network egress, and build times.