Lanzamiento de Vite 6 - Environment API y Nueva Arquitectura

Resumen de Vite 6

En noviembre de 2024, se lanzó Vite 6. Esta versión introduce una nueva arquitectura llamada Environment API, estableciendo las bases para la futura migración a Rolldown.

Referencia: Vite 6.0 Announcement

Environment API

Concepto

Ahora es posible manejar de manera unificada diferentes entornos como cliente, SSR y edge workers.

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

Integración con Frameworks

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

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

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

Referencia: Vite Environment API

Preparación para Rolldown

Contexto

Vite está basado en Rollup, pero en el futuro está planeada la migración a Rolldown, desarrollado en Rust.

// Actual: Rollup
// vite.config.js
export default {
  build: {
    rollupOptions: {
      // Se mantendrá la compatibilidad
    }
  }
}

// Futuro: Rolldown (funcionará con la misma configuración)

Migración Gradual

# Actualmente disponible como característica experimental
VITE_USE_ROLLDOWN=true vite build

Nueva Configuración por Defecto

resolve.conditions

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

// Vite 6 (nuevo valor por defecto)
export default {
  resolve: {
    conditions: ['module', 'browser', 'import']
  }
}

stringify de JSON

// Vite 5: stringify por defecto
// Vite 6: desactivado por defecto
export default {
  json: {
    stringify: false  // Importar como objeto
  }
}

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

Referencia: Vite Configuration

Mejoras de CSS

CSS Modules

// vite.config.js
export default {
  css: {
    modules: {
      // Control más granular ahora disponible
      localsConvention: 'camelCase',
      generateScopedName: '[name]__[local]___[hash:base64:5]'
    }
  }
}

Lightning CSS

// Lightning CSS ahora con soporte estándar
export default {
  css: {
    lightningcss: {
      targets: {
        chrome: 100,
        firefox: 100,
        safari: 15
      }
    }
  }
}

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

  &:hover {
    background: #f0f0f0;
  }

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

Mejoras de Rendimiento

Velocidad de Construcción

Servidor de Desarrollo

// Mejora en tiempo de inicio
// Vite 5: ~500ms
// Vite 6: ~350ms

// Mejora en HMR
// Vite 5: ~50ms
// Vite 6: ~30ms

Cambios Incompatibles

Requisitos de Node.js

// package.json
{
  "engines": {
    "node": ">=18.0.0"  // Se requiere Node.js 18 o superior
  }
}

Eliminación de APIs Obsoletas

// APIs eliminadas
// - server.fs.strict (ahora true por defecto)
// - optimizeDeps.disabled (usar noDiscovery en su lugar)

// Nueva forma de escribir
export default {
  optimizeDeps: {
    noDiscovery: true  // Desactivar descubrimiento automático de dependencias
  }
}

API de Plugins

Nuevos Hooks

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

    // Nuevo hook por entorno
    configEnvironment(name, config) {
      if (name === 'ssr') {
        return {
          // Configuración específica para SSR
        }
      }
    },

    // Hook de resolución por entorno
    resolveId: {
      order: 'pre',
      handler(id, importer, options) {
        const { environment } = options
        if (environment.name === 'edge') {
          // Resolución para edge
        }
      }
    }
  }
}

Referencia: Vite Plugin API

Migración

1. Actualizar Dependencias

npm install vite@6

2. Verificar Configuración

// vite.config.js
export default {
  // json.stringify ahora es false por defecto
  json: {
    stringify: true  // Para mantener el comportamiento anterior
  },

  // Se recomienda especificar conditions explícitamente
  resolve: {
    conditions: ['module', 'browser', 'import']
  }
}

3. Ejecutar Codemod

npx @vite/codemod upgrade

Resumen

Vite 6 es un paso importante hacia la base de construcción de próxima generación.

• Environment API: Unificación del soporte multi-entorno
• Preparación para Rolldown: Preparación para la migración al bundler en Rust
• Rendimiento: Mejora del 15-25% en velocidad de construcción
• Mejoras de CSS: Soporte estándar para Lightning CSS

Es un lanzamiento especialmente importante para desarrolladores de frameworks, y los usuarios finales notarán las mejoras de rendimiento.