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.