O Que É o Vite? A Ferramenta de Build de Front-End Rápida Explicada
O Vite é uma ferramenta de build de front-end que serve o código-fonte via módulos ES nativos em desenvolvimento para inicialização instantânea e empacota com o Rollup para produção.
O Vite ("rápido" em francês) repensou a experiência do servidor de desenvolvimento. Em vez de empacotar tudo antecipadamente, ele serve seu código-fonte como módulos ES nativos e transforma os arquivos sob demanda, de modo que o servidor de desenvolvimento inicia instantaneamente mesmo em apps grandes. Para produção, ele gera um bundle Rollup otimizado.
O que é o Vite
O Vite é uma ferramenta de build e servidor de desenvolvimento para projetos web modernos. Em desenvolvimento, ele aproveita o suporte nativo do navegador a módulos ES mais o esbuild para transformações rápidas, oferecendo inicialização do servidor quase instantânea e hot module replacement. Para produção, ele empacota com o Rollup, aplicando minificação e otimizações.
Como funciona
Durante o desenvolvimento, o Vite não empacota seu app; o navegador requisita os módulos diretamente e o Vite transforma cada um em tempo real usando o esbuild, que é escrito em Go e extremamente rápido. Ele pré-empacota as dependências de terceiros uma vez com o esbuild para ganhar velocidade. O build de produção passa a usar o Rollup para produzir uma saída otimizada e com tree-shaking.
Um exemplo de config
A configuração é mínima, muitas vezes apenas um plugin.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
build: { sourcemap: true }
});Papel em CI/CD
Em CI, "vite build" produz o bundle de produção para o deploy. Os builds são rápidos graças às transformações movidas pelo esbuild, mas apps grandes ainda se beneficiam de fazer cache de node_modules e de qualquer build cache persistente entre execuções. A verificação de tipos costuma ser uma etapa "tsc" separada no pipeline, já que o Vite não verifica tipos durante o build.
Alternativas
O Webpack é o bundler mais antigo e mais configurável, ainda comum em apps grandes. O Parcel oferece bundling sem configuração. Turbopack e Rspack são bundlers mais novos e rápidos. O Vite se tornou o padrão para novos projetos de front-end por causa de sua velocidade em desenvolvimento e de seus padrões sensatos.
Principais conclusões
- O Vite serve módulos ES nativos em desenvolvimento para inicialização e HMR instantâneos.
- Ele usa esbuild para transformações e Rollup para bundles de produção.
- Em CI, "vite build" é rápido; execute a verificação de tipos como uma etapa tsc separada.