Porque é que o Vite arranca instantaneamente

Quem vem do Webpack e experimenta o Vite pela primeira vez faz sempre a mesma pergunta: como é que o servidor de desenvolvimento está pronto em menos de um segundo, num projeto onde o outro demorava trinta?

A resposta não é "é mais rápido a fazer o mesmo". É que faz outra coisa.

1. O Webpack constrói tudo antes de servir

O modelo do Webpack é anterior aos módulos nativos do browser. Para poder servir a aplicação, tem de percorrer o grafo inteiro de importações, transformar cada ficheiro e juntar tudo num bundle. Só quando isso acaba é que a primeira página aparece.

O tempo de arranque cresce com o tamanho do projeto, e uma alteração num ficheiro obriga a refazer parte do trabalho.

2. O Vite serve e só transforma o que for pedido

O browser moderno percebe import nativamente. O Vite aproveita isso: em desenvolvimento não constrói bundle nenhum — serve os ficheiros e transforma cada um quando o browser o pede.

<script type="module" src="/src/main.ts"></script>

Abrir uma página que usa dez componentes transforma dez ficheiros. Os outros quatrocentos do projeto ficam por tocar até alguém lá ir. Daí o arranque não crescer com o tamanho do projeto.

3. As dependências são um caso à parte

Servir o node_modules ficheiro a ficheiro seria péssimo: uma biblioteca pode ter centenas de módulos internos, e seriam centenas de pedidos. O Vite junta-os previamente com o esbuild, que é escrito em Go e faz isso numa fração do tempo.

É por isso que a primeira vez demora mais alguns segundos, e as seguintes não: o resultado fica em node_modules/.vite, e só é refeito quando as dependências mudam.

4. E o build de produção?

Esse é um bundle. Em produção, servir centenas de módulos soltos daria centenas de pedidos a quem visita — o Vite usa o Rollup para juntar, dividir por rotas e minificar.

npm run dev     # servidor com transformação a pedido

npm run build   # bundle de produção, com o Rollup

npm run preview # servir o resultado do build, para o experimentar

A lição que fica é mais geral do que a ferramenta: durante anos empacotámos em desenvolvimento porque o browser não sabia fazer import. Ele passou a saber, e a ferramenta que reparou nisso primeiro ganhou trinta segundos por arranque a toda a gente.