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

This post details strategies for reducing JavaScript asset sizes on GrabFood.com by optimizing dependencies. It outlines a 7-step process: 1. Identifying large/duplicate dependencies using webpack-bundle-analyzer, 2. Investigating dependency usage via top-down and bottom-up approaches, and 3. Applying 7 specific techniques to reduce dependencies: lazy loading, unifying duplicate modules, using ES Modules for tree-shaking, replacing libraries with Web APIs, changing technical approaches to avoid large dependencies, avoiding Node.js dependencies, and optimizing external dependencies. The post quantifies the impact of these optimizations on various performance and cost metrics.