𝗗𝗲𝘀𝗰𝗼𝗺𝗽𝗹𝗶𝗰𝗮𝗻𝗱𝗼 𝗼 𝗩𝗶𝘁𝗲
Ferramentas antigas como Webpack ou CRA funcionam fazendo o bundling de todo o seu projeto primeiro. Elas leem cada arquivo e os combinam em um único e grande arquivo JavaScript. Isso funciona para projetos pequenos. Falha em projetos grandes com milhares de módulos. Bundles grandes levam segundos ou minutos para serem construídos. Toda vez que você salva um arquivo, a ferramenta reconstrói grandes partes do bundle.
O Vite funciona de forma diferente. Navegadores modernos suportam ES modules nativamente. O Vite não faz o bundling do seu código durante o desenvolvimento. Ele serve cada arquivo como um módulo separado apenas quando o navegador o solicita.
Pense em um restaurante de buffet. O chef cozinha cada prato antes de as portas se abrirem. Se você quiser uma pequena mudança, o chef terá que refazer a maior parte do buffet. Você espera muito tempo pela sua comida. É assim que o Webpack funciona.
Agora pense em um restaurante à la carte. As portas abrem imediatamente. Você pede um prato. O chef prepara apenas aquele prato. Se você quiser uma sobremesa mais tarde, o chef prepara apenas a sobremesa. Você não espera o cardápio inteiro ser cozinhado. É assim que o Vite funciona.
O Vite utiliza duas estratégias diferentes para duas necessidades diferentes:
Desenvolvimento (vite dev)
- Estratégia: Serve módulos ESM nativos sem bundling.
- Velocidade: Instantânea. Não depende do tamanho do projeto.
- Por que: Requisições de rede local são rápidas.
Produção (vite build)
- Estratégia: Faz o bundling de tudo usando Rolldown.
- Velocidade: Depende do tamanho do projeto.
- Por que: Centenas de arquivos separados criam requisições HTTP demais para usuários reais. O bundling torna o site final mais rápido para eles.
O Vite oferece velocidade enquanto você codifica e performance no momento do lançamento.
Fonte: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62