Vite 6 Lançado - Environment API e Otimização de Build de Próxima Geração

Visão Geral do Vite 6

O Vite 6 é um novo marco para ferramentas de build frontend. Com a introdução da Environment API, agora é possível lidar de forma unificada com diferentes ambientes de execução como SSR, cliente e workers.

flowchart TB
    subgraph Vite6["Arquitetura do Vite 6"]
        subgraph EnvAPI["Environment API (Novo)"]
            Client["Client<br/>Environment"]
            SSR["SSR<br/>Environment"]
            Worker["Worker<br/>Environment"]
        end

        ModuleGraph["Module Graph<br/>Gerencia grafo de módulos independente para cada ambiente"]

        subgraph Bundlers["Bundlers"]
            esbuild["esbuild<br/>(dev)"]
            Rollup["Rollup<br/>(build)"]
            Rolldown["Rolldown<br/>(futuro)"]
        end

        EnvAPI --> ModuleGraph
        ModuleGraph --> esbuild
        ModuleGraph --> Rollup
        ModuleGraph --> Rolldown
    end

Environment API

A maior mudança no Vite 6 é a introdução da Environment API.

Abordagem Anterior vs Nova Abordagem

// Vite 5 e anteriores: SSR tratado como caso especial
export default defineConfig({
  ssr: {
    noExternal: ['some-package'],
    target: 'node',
  },
});

// Vite 6: Gerenciamento unificado com Environment API
export default defineConfig({
  environments: {
    client: {
      // Configuração específica do cliente
      build: {
        outDir: 'dist/client',
        rollupOptions: {
          input: 'src/entry-client.ts',
        },
      },
    },
    ssr: {
      // Configuração específica do SSR
      build: {
        outDir: 'dist/server',
        rollupOptions: {
          input: 'src/entry-server.ts',
        },
      },
      resolve: {
        noExternal: ['some-package'],
      },
    },
    worker: {
      // Configuração específica do Web Worker
      build: {
        outDir: 'dist/worker',
      },
    },
  },
});

Criando Ambientes Personalizados

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

export default defineConfig({
  environments: {
    // Ambiente personalizado como Edge Runtime
    edge: createEnvironment({
      name: 'edge',
      consumer: 'server',
      webCompatible: true,
      build: {
        outDir: 'dist/edge',
        target: 'esnext',
        rollupOptions: {
          external: ['node:*'],
        },
      },
      resolve: {
        conditions: ['edge-light', 'worker', 'import', 'module'],
      },
    }),
  },
});

Suporte a Ambientes em Plugins

// Plugin personalizado
function myPlugin(): Plugin {
  return {
    name: 'my-plugin',

    // Processamento diferente por ambiente
    transform(code, id, options) {
      const environment = this.environment;

      if (environment.name === 'ssr') {
        // Transformação específica para SSR
        return transformForSSR(code);
      }

      if (environment.name === 'client') {
        // Transformação específica para cliente
        return transformForClient(code);
      }

      return code;
    },

    // Quando o ambiente é inicializado
    configureEnvironment(environment) {
      console.log(`Configuring environment: ${environment.name}`);
    },

    // Hot update
    hotUpdate({ environment, modules }) {
      if (environment.name === 'client') {
        // HMR apenas para cliente
        return modules;
      }
      // Reiniciar para SSR
      return [];
    },
  };
}

Melhorias de Performance

Comparação de Performance

Configuração de Otimização

// vite.config.ts
export default defineConfig({
  // Otimização de pré-bundling de dependências
  optimizeDeps: {
    include: ['lodash-es', 'react', 'react-dom'],
    exclude: ['your-local-package'],

    // Otimização de múltiplos pontos de entrada
    entries: ['src/main.tsx', 'src/worker.ts'],

    // Opções do esbuild
    esbuildOptions: {
      target: 'esnext',
      supported: {
        'top-level-await': true,
      },
    },
  },

  // Otimização de build
  build: {
    // Target
    target: 'esnext',

    // Estratégia de divisão de chunks
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash-es', 'date-fns'],
        },
      },
    },

    // Divisão de código CSS
    cssCodeSplit: true,

    // Source maps
    sourcemap: 'hidden',

    // Minificação
    minify: 'esbuild',
  },
});

Melhorias de CSS

Integração Aprimorada com Lightning CSS

// vite.config.ts
export default defineConfig({
  css: {
    // Usar Lightning CSS por padrão
    transformer: 'lightningcss',

    lightningcss: {
      // Browsers alvo
      targets: {
        chrome: 100,
        firefox: 100,
        safari: 15,
      },

      // CSS Modules
      cssModules: {
        pattern: '[hash]_[local]',
      },

      // Feature flags
      drafts: {
        customMedia: true,
      },
    },
  },
});

Geração de Tipos para CSS Modules

// vite.config.ts
export default defineConfig({
  css: {
    modules: {
      // Geração automática de arquivos de definição de tipo
      localsConvention: 'camelCaseOnly',
      generateScopedName: '[name]__[local]___[hash:base64:5]',
    },
  },

  plugins: [
    // Plugin de geração de tipos para CSS Modules
    cssModulesTyped(),
  ],
});

/* styles.module.css */
.button {
  background: blue;
}

.buttonPrimary {
  composes: button;
  background: green;
}

// styles.module.css.d.ts (gerado automaticamente)
declare const styles: {
  readonly button: string;
  readonly buttonPrimary: string;
};
export default styles;

Novas Opções de Configuração

Melhoria na Configuração JSON

// vite.config.ts
export default defineConfig({
  json: {
    // Habilitar exports nomeados
    namedExports: true,

    // Converter JSON para ES module
    stringify: false,
  },
});

// Exemplo de uso
import { version, name } from './package.json';
console.log(`${name}@${version}`);

Melhoria em Glob Imports

// Padrões de import dinâmico
const modules = import.meta.glob('./modules/*.ts', {
  // Import imediato
  eager: true,

  // Apenas exports específicos
  import: 'default',

  // Parâmetros de query
  query: { raw: true },
});

// Glob import type-safe
const pages = import.meta.glob<{
  default: React.ComponentType;
  meta: { title: string };
}>('./pages/**/*.tsx');

Lidando com Breaking Changes

Versão Mínima do Node.js

// package.json
{
  "engines": {
    "node": ">=18.0.0"
  }
}

Descontinuação da API CJS do Node

// Vite 5 e anteriores: CJS também suportado
const { createServer } = require('vite');

// Vite 6: Apenas ESM
import { createServer } from 'vite';

Script de Migração

# Migração automática
npx vite-migrate@latest

# Verificação manual
npx vite --version

Preparação para Integração com Rolldown

O Vite 6 estabelece a base para futura integração com Rolldown.

flowchart TB
    subgraph Current["Atual (Vite 6)"]
        esbuild_cur["esbuild<br/>(dev)"]
        Rollup_cur["Rollup<br/>(build)"]
    end

    subgraph Future["Futuro (Vite 7+)"]
        Rolldown["Rolldown (Rust)<br/>• Velocidade do esbuild<br/>• Compatibilidade do Rollup<br/>• Pipeline de build unificado"]
    end

    Current --> Future

Efeitos Esperados:

• Melhor consistência entre dev/produção
• Melhoria de 3-5x na velocidade de build
• Redução no uso de memória

Suporte a Frameworks

React + Vite 6

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

export default defineConfig({
  plugins: [
    react({
      // Compatível com React Compiler
      babel: {
        plugins: [['babel-plugin-react-compiler', {}]],
      },
    }),
  ],
  environments: {
    client: {
      build: {
        target: 'esnext',
      },
    },
  },
});

Vue + Vite 6

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  environments: {
    client: {
      resolve: {
        alias: {
          '@': '/src',
        },
      },
    },
  },
});

Links de Referência

• Notas de Lançamento do Vite 6.0
• Environment API RFC
• Projeto Rolldown
• Guia de Migração do Vite