¡Vite 8.1 ya está disponible!

23 de junio de 2026

Vite 8 fue lanzado en marzo con un único empaquetador unificado impulsado por Rolldown, abriendo la puerta a más mejoras. Ahora registra 41.6 millones de descargas semanales, casi alcanzando las descargas totales de Vite 7. Además de resolver las regresiones de actualización, hemos estado trabajando en nuevas características y nos emociona anunciar el lanzamiento de Vite 8.1.

Enlaces rápidos:

• Documentación
• Traducciones: 简体中文, 日本語, English, Português, 한국어, Deutsch, فارسی
• Historial de Cambios en GitHub

Juega en línea con Vite 8.1 usando vite.new o crea una aplicación Vite localmente con tu framework preferido ejecutando pnpm create vite. Revisa la Guía de Introducción para más información.

Te invitamos a ayudarnos a mejorar Vite (uniéndote a los más de 1.2K colaboradores de Vite Core), nuestras dependencias, o proyectos en nuestro ecosistema. Descubre más en nuestra Guía de Contribución. Una buena forma de comenzar es haciendo triaje en las incidencias, revisando PRs, mandando PRs para pruebas basándose en las incidencias abiertas, y apoyando a otros en Discusiones or en el foro de ayuda de Vite Land. Si tienes inquietudes generales, únete a nuestra comunidad de Discord y habla con nosotros en el canal de #contributing.

Mantente actualizado y conéctate con otros creadores utilizando Vite siguiéndonos en Bluesky, X, o Mastodon.

Características

Modo de Desarrollo Empaquetado Experimental (Bundled Dev Mode)

El soporte experimental para el modo de desarrollo empaquetado (Bundled Dev Mode) ya está disponible. Esto anteriormente se conocía como "Full Bundle Mode". Este modo está diseñado para mejorar el rendimiento de aplicaciones de gran tamaño que sufren por la gran cantidad de módulos.

En nuestras pruebas iniciales con una aplicación que carga 10,000 componentes de React, el modo de desarrollo empaquetado logró un inicio alrededor de 15 veces más rápido y recargas de página completas 10 veces más rápidas en comparación con el servidor de desarrollo no empaquetado, al mismo tiempo que mantuvo HMR instantáneo independientemente del tamaño de la aplicación. Las pruebas preliminares en aplicaciones reales muestran ganancias similares: el equipo de Linear vio un renderizado de inicio en frío hasta 3 veces más rápido, recargas completas aproximadamente un 40% más rápidas y 10 Vector menos solicitudes de red.

¿Por qué un modo de desarrollo empaquetado?

Vite es conocido por su enfoque de servidor de desarrollo no empaquetado, que es la razón principal de la velocidad y popularidad de Vite cuando se presentó por primera vez. Este enfoque fue inicialmente un experimento para ver qué tan lejos podíamos llevar los límites del rendimiento del servidor de desarrollo sin el empaquetado tradicional.

Sin embargo, a medida que los proyectos escalan en tamaño y complejidad, se ha vuelto claro que el enfoque no empaquetado de Vite puede degradar el rendimiento durante el desarrollo. Debido a que cada módulo se obtiene por separado, el navegador debe procesar una gran cantidad de solicitudes, lo que aumenta la sobrecarga de inicio y actualización. Este impacto es especialmente notable en aplicaciones grandes y se vuelve más severo cuando los desarrolladores están detrás de un proxy de red, lo que resulta en tiempos de actualización más lentos y una peor experiencia de desarrollo.

El modo de desarrollo empaquetado permitiría servir archivos empaquetados no solo en producción sino también durante el desarrollo, combinando lo mejor de ambos mundos:

• Tiempos de inicio rápidos incluso para aplicaciones grandes
• Sobrecarga de red reducida en las recargas de página
• Mantenimiento de un HMR eficiente sobre la salida ESM

Actualmente, se enfoca en la parte del navegador, los plugins básicos y las características principales. Si estás utilizando un plugin de terceros, es posible que no funcione con este modo. Si utilizas una característica secundaria, también es posible que no funcione de la misma manera. Estamos trabajando para ampliar el soporte y preparando un documento que aclare los cambios que puedan ser necesarios del lado del plugin. Consulta el documento de diseño para obtener más detalles sobre la hoja de ruta.

Para habilitar este modo, puedes pasar --experimental-bundle o añadir experimental.bundledDev: true a tu vite.config.js:

vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  experimental: {
    bundledDev: true,
  },
})

Comparte tus comentarios en la discusión.

Mapa de Importación de Fragmentos Experimental (Chunk Import Map)

En el paquete de salida (bundle), la sentencia de importación de un fragmento (chunk) incluye el hash de ese fragmento. Esto garantiza que el nuevo fragmento se cargue si su contenido ha cambiado. Sin embargo, esto también provoca que cambie el hash del fragmento que importa al fragmento modificado, lo que propaga el cambio en cascada a todos los fragmentos que importan al fragmento modificado de forma transitiva.

La característica experimental de mapas de importación de fragmentos (chunk import map) resuelve este problema utilizando mapas de importación y mejorando la eficiencia de la caché. Esta característica está construida sobre la funcionalidad de Rolldown, pero añade soporte para características específicas de Vite. ¡Muchas gracias a Taisei Mima por su investigación e implementación inicial de esta característica!

Ten en cuenta que experimental.renderBuiltUrl actualmente no funciona con esta option.

Consulta la guía y la documentación de la opción para más detalles. Comparte tus comentarios en la discusión.

Soporte de Integración Wasm ESM

La propuesta de integración de Wasm ESM ahora es compatible con Vite. Ahora puedes importar archivos wasm y utilizar las funciones exportadas directamente:

import { add } from './add.wasm'

console.log(add(1, 2)) // 3

¡Muchas gracias a Menci por su creación y mantenimiento de vite-plugin-wasm mientras la propuesta estaba en etapas tempranas, y también por incorporar la implementación al núcleo de Vite!

Consulta la guía para más detalles.

Un paso más cerca de usar Lightning CSS por defecto

Hemos trabajado con el equipo de Lightning CSS para añadir características que eran compatibles con PostCSS pero de las que carecía Lightning CSS. Vite 8.1 ahora incluye estas dos características:

• Permitir archivos CSS externos importados en archivos CSS (lightningcss#479)
• Registrar dependencias de archivos mediante plugins (lightningcss#877)

Estamos considerando cambiar el preprocesador CSS por defecto a Lightning CSS en la próxima versión principal (major release). Pruébalo mediante css.transformer: 'lightningcss' y comparte tus comentarios en la discusión.

Coincidencia Insensible a Mayúsculas y Minúsculas para import.meta.glob

import.meta.glob ahora admite la opción caseSensitive para buscar archivos sin distinguir entre mayúsculas y minúsculas.

// coincide con ./dir/Module1.js
const modules = import.meta.glob('./dir/module*.js', {
  caseSensitive: false,
})

Descubrimiento de Recursos para Elementos y Atributos HTML Personalizados

Anteriormente, Vite solo descubría recursos (assets) para los elementos y atributos predefinidos. Ahora puedes usar la opción html.additionalAssetSources para añadir más elementos y atributos.

<html-import src="./some/other/file.html"></html-import>
<img
  src="/layout-default.png"
  data-src-dark="/layout-dark.png"
  data-src-light="/layout-light.png"
/>

vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  html: {
    additionalAssetSources: {
      'html-import': {
        srcAttributes: 'src',
      },
      img: {
        srcAttributes: ['data-src-dark', 'data-src-light'],
      },
    },
  },
})

Otros Cambios

Consulta el Historial de cambios para ver otras características y correcciones de errores.

Agradecimientos

Vite 8.1 es posible gracias a nuestra comunidad de colaboradores, mantenedores del ecosistema y al Equipo de Vite. Vite llega a ti de la mano de VoidZero, en asociación con Bolt y Nuxt Labs. También queremos agradecer a nuestros patrocinadores en Vite's GitHub Sponsors y Vite's Open Collective.