Novas Funcionalidades do Vite 6 - Evolução da Ferramenta de Build de Próxima Geração

Visão Geral do Vite 6

O Vite 6, com a introdução da Environment API, permite controlar de forma mais flexível os builds para server-side rendering e ambientes edge.

Environment API

Agora é possível fazer configurações individuais para diferentes ambientes de execução (navegador, Node.js, edge).

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  environments: {
    client: {
      build: {
        outDir: 'dist/client',
        rollupOptions: {
          input: 'src/client/entry.ts'
        }
      }
    },
    ssr: {
      build: {
        outDir: 'dist/server',
        ssr: true
      }
    },
    edge: {
      build: {
        outDir: 'dist/edge',
        target: 'esnext'
      }
    }
  }
});

Melhorias no Servidor de Desenvolvimento

HMR Mais Rápido

O Hot Module Replacement ficou ainda mais rápido.

Vite 5: Detecção → Transformação → Aplicação: 50-100ms
Vite 6: Detecção → Transformação → Aplicação: 20-50ms

Melhoria no Pré-bundling de Dependências

export default defineConfig({
  optimizeDeps: {
    // Controle granular sobre alvos de pré-bundling
    include: ['react', 'react-dom'],
    exclude: ['@my-org/internal-lib'],
    // Personalização de opções ESBuild
    esbuildOptions: {
      target: 'esnext'
    }
  }
});

Otimização de Build

Compatível com Rollup 4

O Vite 6 adota o Rollup 4, melhorando a performance de build.

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // Divisão de chunks mais inteligente
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash-es', 'date-fns']
        }
      }
    }
  }
});

Melhoria no Processamento de CSS

export default defineConfig({
  css: {
    // Suporte completo ao Lightning CSS
    transformer: 'lightningcss',
    lightningcss: {
      targets: {
        chrome: 100
      }
    }
  }
});

Nova API de Plugins

Hooks Adicionais

const myPlugin = () => ({
  name: 'my-plugin',
  // Novo hook
  hotUpdate({ file, modules }) {
    // Processamento personalizado durante HMR
  },
  // Configuração por ambiente
  configEnvironment(name, config) {
    if (name === 'ssr') {
      config.resolve.conditions.push('node');
    }
  }
});

Guia de Migração

Principais Breaking Changes

Migração de Configuração

// Vite 5
export default defineConfig({
  ssr: {
    target: 'node'
  }
});

// Vite 6
export default defineConfig({
  environments: {
    ssr: {
      build: {
        ssr: true
      }
    }
  }
});

Resumo

O Vite 6, com a Environment API, permite gerenciar configurações de build complexas de forma mais flexível. Projetos que utilizam SSR ou edge computing terão benefícios especialmente significativos.