Descomplicando o Vite

Introdução

Antes do Vite, ferramentas como Webpack/CRA funcionavam assim: pra você ver qualquer coisa no navegador, a ferramenta precisava primeiro empacotar (bundlar) todo o seu projeto — ler cada arquivo, resolver cada import, transformar tudo num (ou poucos) arquivo gigante de JS. Em projetos pequenos isso é rápido. Em projetos com milhares de módulos, esse "bundle inicial" podia levar dezenas de segundos, e toda vez que você salvava um arquivo, boa parte disso precisava ser refeito.

A sacada do Vite: navegadores modernos já sabem importar módulos ES nativamente (<script type="module">, import/export direto no browser). Então, em desenvolvimento, por que bundlar nada? O Vite simplesmente serve cada arquivo como um módulo separado, sob demanda, só quando o navegador pede.

Comparação com restaurante

Imagina um restaurante de buffet self-service. Antes de abrir as portas pro primeiro cliente, o chef precisa cozinhar o cardápio inteiro — todos os pratos, todas as guarnições, tudo, mesmo que você só queira um cafezinho. Só depois que tudo está pronto na bandeja é que a porta abre.

Agora imagina que você é cliente fiel, vai lá todo dia, e pede pra trocar uma pitada de sal num prato. O que o chef faz? Ele não troca só o sal — ele manda o prato inteiro de volta pra cozinha, refaz boa parte do buffet de novo, porque os pratos dependem uns dos outros (o molho usa o tempero, a guarnição usa o molho...). E você, sentado na mesa, fica esperando o buffet inteiro reabrir.

Isso é literalmente o Webpack clássico/CRA: antes de você ver qualquer coisa no navegador, ele precisa empacotar (bundlar) o projeto inteiro. E cada vez que você salva um arquivo, ele recalcula um bundle gigante de novo — quanto maior o projeto, mais demorado fica reabrir as portas.

Solução

Agora o Vite. É um restaurante à la carte. A porta abre na hora, sem ninguém cozinhar nada antes. Você senta, olha o cardápio (o index.html), e pede só o que quer — "garçom, me traz o main.tsx". O garçom vai até a cozinha, o chef prepara só esse prato, na hora, e te entrega. Você come e pede a sobremesa (App.tsx)? Aí sim ele prepara a sobremesa — só ela, não o cardápio inteiro de novo.

As duas fases do Vite

Isso é a ideia central: o Vite usa estratégias diferentes pra cada momento porque os dois momentos têm necessidades opostas.

	Desenvolvimento (vite/vite dev)	Produção (vite build)
Estratégia	Serve módulos ESM nativos, sem bundlar	Empacota tudo via Rolldown (bundler em Rust)
Velocidade de start	Instantânea, não depende do tamanho do projeto	Leva o tempo proporcional ao projeto
Por quê essa diferença	Em dev, poucas requisições HTTP locais não importam — rede é instantânea	Em produção, centenas de arquivos separados = centenas de requisições HTTP reais pro usuário final, isso é ruim. Bundlar reduz isso