How We Cut GrabFood.com’s Page JavaScript Asset Sizes by 3x

Summary

GrabFood.com faced high cloud costs while serving over 1 TB of weekly network egress across 175 million requests. To minimize egress and improve page performance, the engineering team audited and reduced their webpack dependencies using tools such as webpack-bundle-analyzer and dependency-cruiser. Their strategies included lazy loading rarely used libraries, unifying duplicate modules under single entry points, and substituting utility libraries like axios with native browser Web APIs. Additionally, altering implementation approaches, such as replacing client-side signed JWT cookie encoding with plain JSON strings, eliminated heavy Node dependencies like crypto. These optimizations reduced JavaScript static assets from 750 KB to 250 KB, decreased CloudFront costs by 20%, and accelerated build times by 3.6x.

Takeaways

1. 1

   Replacing client-side JWT cookie signing with plain JSON stringification eliminated the Node crypto module dependency, saving 250 KB per page asset and 13 MB across the total bundle.

2. 2

   Unifying duplicate instances of grab-maps across four assets into a single asynchronous entry point reduced total bundle size by 2 MB.

3. 3

   The bundle optimizations lowered static JavaScript asset sizes from 750 KB to 250 KB, reduced weekly network egress from 1,800 GB to 1,200 GB, and cut build times from ~2,000 seconds to ~550 seconds.