¿Qué hace crecer a un bundle de JS, y por qué el tamaño perjudica?

Question

IT Interview Practice · Accepted Answer

Un **bundle** es el JavaScript que tu herramienta de build empaqueta y envía al navegador. Crece principalmente por las **dependencias**, el **código duplicado** y **enviar código que la página aún no necesita**.

## Qué lo infla

- **Bibliotecas pesadas**: una sola biblioteca de fechas o de iconos puede añadir cientos de KB. Importar todo `lodash` por una función arrastra la biblioteca entera.
- **Importar todo** en lugar de lo que usas:

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

- **Sin code splitting**: toda la app (cada ruta, cada modal) se empaqueta en un solo archivo cargado por adelantado.
- **Polyfills y dependencias duplicadas**: dos versiones del mismo paquete empaquetadas dos veces.

## Por qué el tamaño perjudica

Los bytes son el problema pequeño; **parsear y ejecutar** JS es el grande. El navegador debe descargar, luego parsear, compilar y ejecutar cada byte en el hilo principal, y eso es mucho más lento en un móvil de gama media que en un portátil. El JS pesado retrasa la interactividad y empeora directamente **INP** y **LCP**.

## Por qué es importante

"Solo añade la biblioteca" es como las apps se vuelven lentas sin darse cuenta. Los entrevistadores quieren verte pensar en el *coste por dependencia* y recurrir a imports por función, tree shaking y code splitting antes de que el bundle se dispare, sobre todo porque los teléfonos de tus usuarios son mucho más débiles que tu máquina de desarrollo.

Qué lo infla

Por qué el tamaño perjudica

Por qué es importante

Preguntas relacionadas