BlogApril 29, 2026

Our app had 5 MB of JavaScript. One afternoon cut it to 600 KB.

Hamza Ali
Our app had 5 MB of JavaScript. One afternoon cut it to 600 KB.
We didn't write 5 MB of code. We accidentally imported it — with one pattern repeated three times. Here's the exact process that found it.

The Crime Scene

A React app with a home page, a settings form, and an inbox. Simple. Yet the JavaScript bundle weighed 5,321 KB. Using a bundle visualizer (Rollup Plugin Visualizer / Next.js Bundle Analyzer) makes the culprits immediately obvious as proportional colored blocks. One look and you know where the problem lives.

The 4-Step Investigation Process

  1. Identify: Find the largest block in the visualizer. In this case: @mui/material + @mui/icons-material.
  2. Understand: Why is the entire library included? Because of import * as Material from '@mui/material' — a wildcard import used to build a namespaced UI object. Tree-shaking can't follow it.
  3. Confirm: Comment out the import, rebuild. Bundle drops from 5 MB to 811 KB immediately. Diagnosis confirmed.
  4. Fix properly: Replace wildcard imports with named imports for only the components actually used. Bundle stabilizes at 878 KB.

The Patterns That Bloat Bundles

  • Wildcard + namespace pattern (import * as X; export const Ui = \{ X \}) defeats tree-shaking entirely. Beautiful DX, terrible for bundle size.
  • Non-ESM libraries (like classic Lodash) can't be tree-shaken regardless of how you import them. Run npx is-esm [package] to check before you commit.
  • Duplicate-purpose libraries: This project had three separate date libraries (date-fns, Moment, Luxon) doing the same job. Consolidating to date-fns alone cut another 20% off the bundle.
  • Transitive dependencies sneak in through other packages. Use npx npm-why [package] to find who's actually pulling them in.

End Result

5,321 KB → 600 KB. A single afternoon of methodical investigation, no heroics. The tool is already in your Node project — you just have to open the report.When did you last run a bundle analyzer on your project? Drop your biggest surprise find below. 🔍#WebPerformance #JavaScript #ReactJS #BundleSize #TreeShaking #FrontendDev
Share this post:

Recent posts

Thumbnail of How I Built a RAG Pipeline That Actually Works in Production
Hamza Ali
June 10, 2026
How I Built a RAG Pipeline That Actually Works in ProductionMost RAG tutorials skip the hard parts — chunking strategy, re-ranking, hallucination detection. Here's how I built one that handles 50K documents with 95% accuracy.AI Engineering
Thumbnail of n8n vs Make vs Zapier: When to Use Each
Hamza Ali
June 5, 2026
n8n vs Make vs Zapier: When to Use EachAfter building 100+ automations across all three platforms, here's the honest breakdown: cost, complexity, reliability, and when each one wins.Automation
On this page