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.

Context

GrabFood.com was serving over 1 TB of network egress and 175 million requests weekly, resulting in elevated cloud infrastructure costs and a need to reduce bundle sizes to improve load times and lower egress.

Approach / What changed

The team inspected dependencies using webpack-bundle-analyzer and dependency-cruiser, then reduced bundle sizes by lazy loading modules, consolidating duplicate imports, adopting ES Modules, using native Web APIs like fetch(), and avoiding Node-specific dependencies.

Takeaways

• 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.
• Unifying duplicate instances of grab-maps across four assets into a single asynchronous entry point reduced total bundle size by 2 MB.
• 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.

Related reading

• Grab · Dec 3, 2020

  How Grab is Blazing Through the Superapp Bazel Migration

  Grab's mobile superapp scaled past 2.5 million lines of code across both Android and iOS, leading to unsustainable local and CI build times under Gradle and Xcode. To address these bottlenecks, the engineering team analyzed their dependency trees and introduced an internal tool to calculate and optimize the build critical path. They also deployed a Kubernetes-autoscaled remote build system using Mainframer for Android and implemented Test Impact Analysis to run only affected tests in pre-merge validation. While dependency decoupling yielded modest 7% to 10% gains and iOS remote builds proved unscalable on Apple hardware, Android remote builds reduced local compile times by up to 50%, and targeted test execution reduced pre-merge pipeline durations by more than 30%.

  Sergii Grechukha

• Grab · Jul 13, 2021

  App Modularisation at Scale

  Grab transitioned its monolithic mobile application into a modular architecture to resolve increasing code conflicts, slow releases, and difficult team collaboration. The team decomposed the single module by establishing base infrastructure modules, shared UI and utility libraries, discrete feature modules, and bridge kit modules for inter-module communication. Dependency injection using Dagger ties these components together in the main app module while preventing feature modules from directly depending on one another. The architecture spans over 1,000 modules across the app, with more than 200 modules in the Grab Financial Group payments domain where over 95% of modules build in under 15 seconds. This approach accelerated Gradle CI and local builds through parallel compilation and caching, though it increased Gradle sync times, IDE memory usage, and configuration maintenance overhead.

  Amar Jain

• Grab · Apr 19, 2021

  How We Improved Agent Chat Efficiency with Machine Learning

  Agent typing time represented a large portion of Grab's chat support journey, and 85% of messages were still free typed because agents customized static templates to fit their personal style. To accelerate typing across multilingual markets without robotic templates, Grab built SmartChat, a machine learning feature that provides contextual sentence completion. The team opted for a lightweight seq2seq architecture using single-layered GRU encoder-decoders in TensorFlow instead of bulky attention models to keep model latency under 100ms. The user interface was implemented in React using a content-editable div with inline typeahead suggestions activated via keyboard shortcuts.

  Suman Anand

• Grab · May 10, 2021

  Our Journey to Continuous Delivery at Grab (Part 2)

  Conveyor, an in-house continuous delivery system at Grab, introduces hermetic deployments by tracking application code alongside static and dynamic configuration parameters. This hermeticity guarantees that production releases use combinations of versioned artifacts previously verified in staging, preventing rollback incompatibilities. Conveyor replaces single multi-environment pipelines with decoupled pipelines, while automating cluster locking, deployment slot scheduling, release note generation, and canary monitoring with automated rollbacks. These automations reduced production deployment failure rates from 1.5% to an average of 0.3% over a three-month period. Grab also doubled the volume of production changes between 2018 and 2020 while saving more than 5,000 man-days of engineering effort in 2020.

  Sylvain Bougerel