Vite 6 Lançado - Environment API e Nova Arquitetura

Visão Geral do Vite 6

Em novembro de 2024, o Vite 6 foi lançado. Esta versão introduz uma nova arquitetura chamada Environment API, estabelecendo a base para a futura migração ao Rolldown.

Referência: Vite 6.0 Announcement

Environment API

Conceito

Agora é possível lidar de forma unificada com diferentes ambientes, como cliente, SSR e edge workers.

// vite.config.js
export default {
  environments: {
    client: {
      // Configuração para cliente
      build: {
        outDir: 'dist/client',
        rollupOptions: {
          input: 'src/entry-client.js'
        }
      }
    },
    ssr: {
      // Configuração para SSR
      build: {
        outDir: 'dist/server',
        rollupOptions: {
          input: 'src/entry-server.js'
        }
      }
    },
    edge: {
      // Configuração para edge workers
      resolve: {
        conditions: ['edge', 'worker']
      }
    }
  }
}

Integração com Frameworks

// API para desenvolvedores de frameworks
import { createServer } from 'vite'

const server = await createServer({
  environments: {
    client: {},
    ssr: {},
  }
})

// Carregar módulos por ambiente
const clientModule = await server.environments.client.moduleGraph.getModuleById('/src/App.vue')
const ssrModule = await server.environments.ssr.moduleGraph.getModuleById('/src/App.vue')

Referência: Vite Environment API

Preparação para Rolldown

Contexto

O Vite é baseado em Rollup, mas no futuro planeja migrar para o Rolldown, escrito em Rust.

// Atualmente: Rollup
// vite.config.js
export default {
  build: {
    rollupOptions: {
      // Compatibilidade será mantida
    }
  }
}

// Futuro: Rolldown (funcionará com a mesma configuração)

Migração Gradual

# Atualmente disponível como recurso experimental
VITE_USE_ROLLDOWN=true vite build

Novas Configurações Padrão

resolve.conditions

// Vite 5
// resolve.conditions = ['module', 'browser', 'development|production']

// Vite 6 (novo padrão)
export default {
  resolve: {
    conditions: ['module', 'browser', 'import']
  }
}

stringify de JSON

// Vite 5: stringify por padrão
// Vite 6: desativado por padrão
export default {
  json: {
    stringify: false  // Importar como objeto
  }
}

// Exemplo de uso
import data from './data.json'
console.log(data.key)  // Tree-shaking funciona

Referência: Vite Configuration

Melhorias em CSS

CSS Modules

// vite.config.js
export default {
  css: {
    modules: {
      // Controle mais granular agora disponível
      localsConvention: 'camelCase',
      generateScopedName: '[name]__[local]___[hash:base64:5]'
    }
  }
}

Lightning CSS

// Lightning CSS agora com suporte padrão
export default {
  css: {
    lightningcss: {
      targets: {
        chrome: 100,
        firefox: 100,
        safari: 15
      }
    }
  }
}

/* CSS Nesting nativo */
.card {
  background: white;

  &:hover {
    background: #f0f0f0;
  }

  & .title {
    font-size: 1.5rem;
  }
}

Melhorias de Performance

Velocidade de Build

Servidor de Desenvolvimento

// Melhoria no tempo de inicialização
// Vite 5: ~500ms
// Vite 6: ~350ms

// Melhoria no HMR
// Vite 5: ~50ms
// Vite 6: ~30ms

Breaking Changes

Requisitos do Node.js

// package.json
{
  "engines": {
    "node": ">=18.0.0"  // Node.js 18 ou superior é obrigatório
  }
}

Remoção de APIs Depreciadas

// APIs removidas
// - server.fs.strict (agora true por padrão)
// - optimizeDeps.disabled (use noDiscovery em vez disso)

// Nova sintaxe
export default {
  optimizeDeps: {
    noDiscovery: true  // Desabilitar descoberta automática de dependências
  }
}

API de Plugins

Novos Hooks

// vite-plugin-example.js
export default function myPlugin() {
  return {
    name: 'my-plugin',

    // Novo hook por ambiente
    configEnvironment(name, config) {
      if (name === 'ssr') {
        return {
          // Configuração específica para SSR
        }
      }
    },

    // Hook de resolução de ambiente
    resolveId: {
      order: 'pre',
      handler(id, importer, options) {
        const { environment } = options
        if (environment.name === 'edge') {
          // Resolução para edge
        }
      }
    }
  }
}

Referência: Vite Plugin API

Migração

1. Atualizar Dependências

npm install vite@6

2. Verificar Configuração

// vite.config.js
export default {
  // json.stringify agora é false por padrão
  json: {
    stringify: true  // Para manter o comportamento anterior
  },

  // Especificação explícita de conditions é recomendada
  resolve: {
    conditions: ['module', 'browser', 'import']
  }
}

3. Executar Codemod

npx @vite/codemod upgrade

Resumo

O Vite 6 é um passo importante em direção à próxima geração de infraestrutura de build.

• Environment API: Suporte unificado para múltiplos ambientes
• Preparação para Rolldown: Preparação para migração ao bundler em Rust
• Performance: Melhoria de 15-25% na velocidade de build
• Melhorias em CSS: Suporte padrão ao Lightning CSS

Este é um lançamento particularmente importante para desenvolvedores de frameworks, e os usuários finais poderão sentir a melhoria de performance.