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

[Grab](https://yomu.fyi/company/grab) · Gibson Cheng · Jul 29, 2021

**Type:** Problem & solution

## 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.

**Tags:** [Performance](https://yomu.fyi/topic/performance), [Refactoring](https://yomu.fyi/topic/refactoring)

[Read original post](https://engineering.grab.com/grabfood-bundle-size)