Vite

O que é o Vite?

O Vite é uma ferramenta de build com duas funções: um servidor de desenvolvimento que fica pronto quase instantaneamente e um build de produção que gera bundles otimizados. Ele foi criado por Evan You em 2020 e tornou-se a toolchain padrão para a maioria dos frameworks front-end modernos.

A ideia central é que o desenvolvimento e a produção possuem gargalos diferentes. No desenvolvimento, você deseja um início rápido e atualizações ágeis, por isso o Vite não faz bundle — ele serve seu código fonte via ES modules nativos e transforma os arquivos sob demanda. Na produção, você quer a saída menor e mais rápida possível, então o Vite utiliza o Rollup para fazer o bundle e a otimização.

O servidor de desenvolvimento

Executar vite inicia um servidor de desenvolvimento que serve seu código-fonte como módulos ES nativos. O navegador solicita cada módulo e o Vite o transforma em tempo real.

# terminal
vite          # start the dev server
vite build    # production build
vite preview  # preview the production build locally

Como não há a necessidade de gerar um bundle completo, a inicialização é medida em milissegundos e permanece constante à medida que o projeto cresce. As dependências são pré-agrupadas (pre-bundled) uma única vez com o esbuild, já que mudam raramente, evitando assim uma enxurrada de pequenas requisições. O Hot module replacement então atualiza apenas os módulos que foram alterados, preservando o estado da aplicação sempre que possível.

O build de produção

vite build executa o pipeline do Rollup e grava o resultado em dist por padrão.

• Tree-shaking: remove exportações não utilizadas.
• Code splitting: gera chunks para rotas e importações dinâmicas.
• Minification: reduz o tamanho do JavaScript, CSS e HTML.
• Asset hashing: adiciona hashes de conteúdo para cache de longo prazo.
• CSS handling: extrai e minifica as folhas de estilo.

O resultado é um conjunto de arquivos estáticos que você pode implantar em qualquer host, CDN ou plataforma estática.

Configuração

O Vite lê um arquivo vite.config.ts na raiz do projeto.

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { "@": "/src" },
  },
  server: {
    port: 5173,
    proxy: {
      "/api": "http://localhost:8787",
    },
  },
  build: {
    outDir: "dist",
    sourcemap: true,
  },
});

A opção resolve.alias cria atalhos de importação, e a server.proxy encaminha requisições de API para um backend durante o desenvolvimento, o que evita problemas de CORS. A maioria das configurações de frameworks gera esse arquivo automaticamente para você, exigindo apenas pequenas adições.

Plugins

Os plugins são a forma como o Vite oferece suporte a frameworks e ferramentas. Eles implementam uma interface compatível com o Rollup, contando com hooks adicionais específicos do Vite.

// plugins.ts
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue()],
});

Plugins comuns abrangem React, Vue, Svelte e Solid, além de ferramentas de CSS como Tailwind, suporte a navegadores legados, funcionalidades de PWA e análise de bundle. Como a interface é compatível com o Rollup, grande parte do ecossistema de plugins do Rollup funciona diretamente.

Variáveis de ambiente

O Vite carrega variáveis de arquivos .env e expõe ao código do cliente apenas aquelas prefixadas com VITE_.

# .env
VITE_API_URL=https://api.example.com
DB_PASSWORD=secret

// env.ts
const url = import.meta.env.VITE_API_URL;
const isDev = import.meta.env.DEV;

O prefixo VITE_ é um mecanismo de segurança: qualquer coisa sem ele fica fora do bundle do cliente, evitando que segredos vazem acidentalmente. As variáveis são substituídas no momento do build, não lidas em tempo de execução, e são acessadas através de import.meta.env.

Assets e CSS

Você importa assets diretamente do JavaScript, e o Vite cuida do restante.

// assets.ts
import logo from "./logo.svg";
import "./styles.css";
import styles from "./Button.module.css";

Assets pequenos são incorporados como data URLs, assets maiores são emitidos com nomes com hash, e o CSS importado desta forma é empacotado e, em desenvolvimento, sofre hot-reload. O diretório public serve para arquivos que devem manter um caminho exato, como o robots.txt ou um favicon referenciado por URL.

Code splitting

O import() dinâmico cria um chunk separado que é carregado sob demanda, sendo a principal ferramenta para manter o bundle inicial pequeno.

// lazy.ts
const { Chart } = await import("./Chart");

Aplique-o em rotas, modais, editores e qualquer funcionalidade que não seja necessária no first paint. Frameworks construídos sobre o Vite geralmente gerenciam o splitting em nível de rota para você, mas entender a primitiva ajuda quando você precisa de um controle mais refinado.

Além do app

O Vite não serve apenas para single-page apps. O Library mode cria um pacote distribuível com os formatos adequados e dependências externalizadas. O Vite também suporta server-side rendering e é o motor interno do Vitest, Astro, Nuxt e SvelteKit. Essa fundação compartilhada é o motivo pelo qual a mesma configuração, aliases e plugins funcionam no desenvolvimento, nos testes e no build.

Melhores práticas

• Mantenha a configuração minimalista e deixe que os plugins do framework cuidem dos detalhes.
• Use resolve.alias para imports limpos em vez de caminhos relativos longos.
• Faça o proxy da API em desenvolvimento em vez de fixar um host no código.
• Prefixe as variáveis de ambiente do cliente com VITE_ e mantenha os segredos sem prefixo.
• Divida funcionalidades pesadas utilizando imports dinâmicos.
• Importe assets via JavaScript para que eles sejam hashados e otimizados.
• Ative source maps em produção se você utiliza um rastreador de erros.

Erros comuns

• Esperar process.env no código do cliente em vez de import.meta.env.
• Expor segredos ao prefixá-los com VITE_.
• Colocar arquivos em public que deveriam ser importados e processados com hash.
• Gerar um bundle enorme por nunca utilizar imports dinâmicos.
• Adicionar plugins que duplicam a funcionalidade de um plugin de framework.
• Tentar forçar a configuração em vez de utilizar um preset de framework.

Próximos passos

O Vite é a base da toolchain moderna. Compare-o com o Webpack para projetos mais antigos, execute testes com o Vitest e veja como ele impulsiona frameworks nos guias de React, Astro e SvelteKit. Depois, abra o vite.config.ts de um projeto e faça uma alteração deliberada para ver o efeito.