O que faz um bundle JS crescer, e por que o tamanho prejudica?

Question

IT Interview Practice · Accepted Answer

Um **bundle** é o JavaScript que sua ferramenta de build empacota e envia ao navegador. Ele cresce principalmente por causa de **dependências**, **código duplicado** e **envio de código que a página ainda não precisa**.

## O que o infla

- **Bibliotecas pesadas** — uma única biblioteca de datas ou de ícones pode adicionar centenas de KB. Importar todo o `lodash` por uma função puxa a coisa inteira.
- **Importar tudo** em vez do que você usa:

```js
import _ from "lodash";           // ~70KB — a biblioteca inteira
import debounce from "lodash/debounce"; // ~2KB — só a função que você precisa
```

- **Sem code splitting** — o app inteiro (cada rota, cada modal) é empacotado em um único arquivo carregado de início.
- **Polyfills e dependências duplicadas** — duas versões do mesmo pacote empacotadas duas vezes.

## Por que o tamanho prejudica

Os bytes são o problema pequeno; **parsear e executar** o JS é o grande. O navegador precisa baixar, depois parsear, compilar e executar cada byte na thread principal — e isso é muito mais lento em um celular de gama média do que em um laptop. JS pesado atrasa a interatividade e piora diretamente o **INP** e o **LCP**.

## Por que isso importa

"É só adicionar a biblioteca" é como os apps se tornam lentos silenciosamente. Entrevistadores querem ver você pensar sobre o *custo por dependência* e recorrer a imports por função, tree shaking e code splitting antes que o bundle inche — especialmente porque os celulares dos seus usuários são bem mais fracos do que a sua máquina de desenvolvimento.

O que o infla

Por que o tamanho prejudica

Por que isso importa

Perguntas relacionadas