What makes a JS bundle grow, and why does size hurt?

Question

IT Interview Practice · Accepted Answer

A **bundle** is the JavaScript your build tool packages and ships to the browser. It grows mainly from **dependencies**, **duplicated code**, and **shipping code the page doesn't need yet**.

## What inflates it

- **Heavy libraries** — one date or icon library can add hundreds of KB. Importing all of `lodash` for one function pulls in the whole thing.
- **Importing everything** instead of what you use:

```js
import _ from "lodash";           // ~70KB — the entire library
import debounce from "lodash/debounce"; // ~2KB — just the function you need
```

- **No code splitting** — the whole app (every route, every modal) is bundled into one file loaded up front.
- **Polyfills and duplicated dependencies** — two versions of the same package bundled twice.

## Why size hurts

Bytes are the small problem; **parsing and executing** JS is the big one. The browser must download, then parse, compile, and run every byte on the main thread — and that's much slower on a mid-range phone than on a laptop. Heavy JS delays interactivity and directly worsens **INP** and **LCP**.

## Why it matters

"Just add the library" is how apps quietly become slow. Interviewers want to see you think about *cost per dependency* and reach for per-function imports, tree shaking, and code splitting before the bundle balloons — especially since your users' phones are far weaker than your dev machine.

What inflates it

Why size hurts

Why it matters

Related questions