Turbopack vs Vite: a batalha dos bundlers modernos

1. Contexto histórico: o renascimento dos bundlers

Durante anos, o Webpack reinou absoluto como o principal bundler do ecossistema JavaScript. Sua flexibilidade e vasto ecossistema de plugins o tornaram indispensável, mas seus gargalos de desempenho sempre foram uma dor de cabeça. Projetos grandes podiam levar dezenas de segundos para iniciar o servidor de desenvolvimento, e o Hot Module Replacement (HMR) frequentemente degradava conforme o código crescia.

A virada começou com o Vite, lançado por Evan You em 2020. Ao utilizar módulos ES nativos no navegador durante o desenvolvimento, o Vite eliminou a necessidade de empacotar todo o código antes de servir. O resultado foi um dev server praticamente instantâneo, independentemente do tamanho do projeto. O pré-bundling com esbuild acelerou ainda mais o processo, enquanto o Rollup cuidava da build de produção com tree-shaking eficiente.

Em outubro de 2022, durante a Next.js Conf, a Vercel anunciou o Turbopack com uma promessa ousada: ser 10x mais rápido que o Vite e 700x mais rápido que o Webpack em operações de cold start. Escrito em Rust, o Turbopack foi projetado desde o início para ser incremental, paralelo e com cache granular em nível de função.

2. Arquitetura interna: como cada um funciona por baixo dos panos

O Vite adota uma abordagem híbrida. No desenvolvimento, o esbuild realiza o pré-bundling das dependências, convertendo módulos CommonJS para ESM e agrupando múltiplos imports em um único arquivo para reduzir requisições HTTP. O servidor então serve os módulos sob demanda, utilizando cache HTTP e transformações sob medida para cada framework.

# Exemplo de configuração Vite (vite.config.js)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  }
})

O Turbopack, por sua vez, é construído sobre um motor em Rust que opera com três princípios: paralelismo nativo, cache em nível de função e incrementabilidade total. Cada módulo é compilado de forma independente, e o resultado é armazenado em cache com granularidade fina — desde a resolução de imports até a saída final. Quando uma única função muda, apenas os módulos que dependem diretamente dela são recompilados.

# Exemplo de uso do Turbopack com Next.js (next.config.js)
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': ['@svgr/webpack']
      }
    }
  }
}

module.exports = nextConfig

A diferença fundamental está no modelo de incrementabilidade. Enquanto o Vite precisa re-analisar todo o grafo de dependências modificado, o Turbopack mantém uma árvore de dependências incremental que rastreia alterações em nível de expressão.

3. Desempenho em desenvolvimento (HMR e cold start)

Em projetos pequenos, ambos oferecem experiência quase instantânea. A diferença aparece em aplicações de médio a grande porte. O Vite realiza cold start com esbuild em cerca de 1-3 segundos para projetos típicos, enquanto o Turbopack promete sub-500ms mesmo em monorepos complexos.

O HMR do Vite opera por módulo: quando um arquivo muda, ele reenvia apenas aquele módulo para o navegador. O Turbopack vai além: utiliza memoização de funções para evitar reexecuções desnecessárias e mantém o estado do componente intacto sempre que possível.

Benchmarks da Vercel indicam que o Turbopack é de 5 a 10 vezes mais rápido que o Vite em operações de HMR em projetos com mais de 1000 módulos. Testes independentes, no entanto, mostram que a vantagem é mais modesta em projetos típicos de médio porte.

# Comando para iniciar servidor de desenvolvimento com Turbopack
npx next dev --turbo

# Comando equivalente com Vite
npx vite

4. Experiência do desenvolvedor e ecossistema

O Vite oferece maturidade e versatilidade. Seu ecossistema inclui plugins para React, Vue, Svelte, Solid, Lit e dezenas de outros frameworks. A configuração é minimalista para projetos simples, mas permite customização profunda através do ecossistema Rollup. O suporte a TypeScript, CSS Modules e assets estáticos é nativo e bem documentado.

O Turbopack, por enquanto, está profundamente integrado ao Next.js e ao ecossistema Vercel. Sua configuração é praticamente zero quando usado com Next.js, mas a customização avançada ainda é limitada. A Vercel promete suporte a mais frameworks e plugins Rollup no futuro, mas atualmente a flexibilidade é menor.

A curva de aprendizado favorece o Vite para quem já conhece Webpack ou Rollup. O Turbopack é mais simples para quem já usa Next.js, mas exige maior compreensão do ecossistema Vercel para customizações.

5. Build de produção: otimizações e tamanho final

Na build de produção, o Vite utiliza o Rollup com tree-shaking agressivo e code splitting automático. O resultado são bundles otimizados com tamanho competitivo. O Rollup permite plugins avançados para análise de bundle, lazy loading e otimização de assets.

# Saída típica de build com Vite
dist/
├── assets/
│   ├── index.abc123.js
│   ├── vendor.def456.js
│   └── style.ghi789.css
└── index.html

O Turbopack realiza otimizações em Rust, incluindo code splitting automático baseado em rotas e componentes. Para aplicações Next.js, ele gera bundles otimizados que respeitam o sistema de páginas e layouts. Em testes comparativos, os bundles finais do Turbopack são cerca de 5-10% menores que os do Vite em aplicações Next.js, mas a diferença é marginal em SPAs simples.

O tempo de build é onde o Turbopack brilha: builds em Rust podem ser 3-5x mais rápidos que builds equivalentes com Rollup, especialmente em projetos grandes.

6. Casos de uso e decisão de escolha

Escolha Vite quando:
- Você está construindo uma SPA independente (React, Vue, Svelte)
- Precisa de suporte maduro a múltiplos frameworks
- Deseja um ecossistema rico de plugins e templates
- Valoriza maturidade e documentação extensa

Escolha Turbopack quando:
- Você já usa Next.js ou planeja migrar para ele
- Trabalha com monorepos grandes (Nx, Turborepo)
- Precisa de desempenho extremo em desenvolvimento
- Sua equipe já está no ecossistema Vercel

Os trade-offs são claros: o Vite oferece maturidade e flexibilidade; o Turbopack oferece performance bruta e integração com Next.js. Para projetos independentes, o Vite ainda é a escolha mais segura. Para equipes Vercel, o Turbopack é o caminho natural.

7. Futuro dos bundlers e o que esperar

O roadmap do Turbopack inclui suporte a Vue, Svelte e outros frameworks, além de compatibilidade com plugins Rollup. A Vercel planeja torná-lo um bundler universal, mas a prioridade atual é o ecossistema Next.js.

O Vite 6 deve trazer melhorias no sistema de plugins e otimizações no Rollup. A comunidade continua ativa, e o Vite se consolida como ferramenta padrão para novos projetos front-end.

O mercado sinaliza convergência: tanto Vite quanto Turbopack estão adotando arquiteturas incrementais e caching agressivo. A fragmentação atual pode dar lugar a padrões compartilhados, como o uso de Rust para tarefas críticas de desempenho. O futuro provavelmente verá bundlers híbridos que combinam a flexibilidade do ecossistema JavaScript com a performance de engines nativos.

Referências