¿Qué es Vite?

¿Qué es Vite?

Vite es una herramienta de compilación (build tool) para el frontend creada por Evan You, el creador de Vue.js. En desarrollo sirve tus archivos fuente al navegador mediante módulos ES nativos, de modo que el servidor de desarrollo arranca rápido y los cambios aparecen con reemplazo de módulos en caliente (HMR). Para producción empaqueta tu código con Rolldown en archivos estáticos optimizados que puede alojar cualquier servidor web o CDN.

La versión mayor actual es Vite 8, publicada el 12 de marzo de 2026. Los tutoriales antiguos describen Vite 7 y anteriores, que usaban esbuild en desarrollo y Rollup en la compilación de producción. Esa diferencia importa cuando lees una guía antigua o el readme de un plugin.

Cómo funciona Vite

Desarrollo: módulos ES nativos

Vite sirve el código fuente bajo demanda mediante ESM nativo, así que el navegador solo carga lo que importa la página actual. El arranque sigue siendo rápido a medida que crece el proyecto porque no hay que empaquetar nada antes. Las librerías de node_modules se preempaquetan una vez, por dos motivos que da la documentación de Vite: los paquetes CommonJS y UMD deben convertirse a ESM, y un paquete con muchos módulos internos pasa a ser una sola petición en lugar de cientos. En Vite 8 ese preempaquetado lo hace Rolldown.

Producción: una sola canalización de empaquetado

El ESM sin empaquetar sigue siendo lento en producción porque las importaciones anidadas añaden viajes de red, así que vite build empaqueta, divide el código y añade hashes a los nombres de archivo. Rolldown es un empaquetador escrito en Rust por el equipo de VoidZero para sustituir a esbuild y a Rollup, de modo que desarrollo y producción compartan la misma canalización. El anuncio de Vite 8 habla de compilaciones hasta 10-30 veces más rápidas y cita a usuarios como Linear, cuya compilación de producción pasó de 46 s a 6 s. Son cifras de los propios proveedores sobre sus proyectos, así que mide tu propia compilación.

Qué funciona sin configuración extra

• TypeScript y JSX. Vite transpila los archivos .ts con el transformador Oxc, pero no comprueba tipos. Ejecuta tsc --noEmit en la CI.
• CSS. CSS normal, módulos CSS (cualquier archivo que termine en .module.css) y PostCSS.
• Importaciones con glob. import.meta.glob importa muchos módulos por patrón, con carga diferida por defecto.
• Web workers. La forma recomendada es new Worker(new URL(...)).
• Variables de entorno. Se leen con import.meta.env desde archivos .env.
• Plantillas oficiales para JavaScript puro, Vue, React, Preact, Lit, Svelte, Solid y Qwik, cada una con variante de TypeScript.

Requisitos: Vite 8 necesita Node.js 20.19+ o 22.12+. La salida de producción apunta a navegadores clasificados como Baseline Widely Available en una fecha fijada para cada versión mayor (aproximadamente mediados de 2023 en esta). Los navegadores más antiguos necesitan @vitejs/plugin-legacy.

Ejemplo: una URL de API que llega al navegador

Añades VITE_API_URL=https://api.example.com a .env.production y la lees como import.meta.env.VITE_API_URL. Vite la sustituye por el valor literal al compilar. Una variable sin el prefijo VITE_, como DB_PASSWORD, se queda fuera del código cliente y es undefined en el navegador. La otra cara es que todo lo que lleva el prefijo lo ve cualquier visitante, así que nunca pongas un secreto en una variable VITE_.

Errores comunes

• Usar process.env. En código de navegador Vite usa import.meta.env. El código migrado necesita actualizar esas referencias.
• Poner secretos en variables VITE_. Acaban en el paquete público.
• Tomar el servidor de desarrollo como vista previa de producción. El desarrollo sirve módulos sin empaquetar y producción sirve paquetes. Ejecuta vite build y vite preview antes de juzgar el rendimiento.
• Esperar que los errores de tipos rompan la compilación. No lo hacen salvo que añadas un paso de comprobación de tipos.
• Ignorar el tamaño del paquete. Una compilación rápida no dice cuánto JavaScript descarga el visitante. Divide las rutas y aplica carga diferida a lo que no hace falta en el primer renderizado.
• Usar una versión de Node no compatible, que falla al instalar o arrancar.

Vite y webpack

webpack empaqueta toda la aplicación antes de poder servirla en desarrollo. Vite sirve módulos a petición y solo empaqueta para producción, por eso los proyectos grandes arrancan antes. webpack tiene un ecosistema de plugins más grande y antiguo, y algunas funciones propias de webpack no tienen equivalente directo en Vite, así que revisa tus plugins antes de migrar. La API de plugins de Vite se apoya en la de Rollup, y Vite 8 mantiene la compatibilidad con los plugins existentes mediante una capa de compatibilidad.

Renderizado en el servidor

Vite incluye soporte integrado para el renderizado en el servidor (SSR), pero su guía describe la API como de bajo nivel y pensada para autores de librerías y frameworks. La mayoría de los equipos usa un framework que la envuelve en lugar de configurarla a mano. Para los pros y contras de una app renderizada en el cliente, consulta aplicaciones de una sola página.

Vite, pruebas de rendimiento y monitorización

Vite acorta tu compilación y tu ciclo de retroalimentación. No decide lo rápido que se siente el sitio terminado. Prueba la compilación de producción: la monitorización de velocidad de página de LoadFocus ejecuta auditorías Lighthouse programadas y comprobaciones de Core Web Vitals desde 25 regiones en la nube, para que veas si un cambio en el paquete ayudó a páginas reales. Una app de una sola página hecha con Vite además llama a APIs, y esas son las que fallan primero con tráfico. La monitorización de API vigila los endpoints de los que depende tu app, y una prueba de carga muestra cómo se comporta el backend con muchos usuarios simultáneos. Dos guías profundizan: pruebas de carga para aplicaciones de una sola página y rendimiento de JavaScript. La configuración se explica en la guía oficial de Vite.

Preguntas frecuentes: Vite

¿Vite es un empaquetador?

Es una herramienta de compilación que incluye un servidor de desarrollo y una compilación de producción. El empaquetado en sí lo hace Rolldown en Vite 8 (Rollup en Vite 7 y anteriores).

¿Vite comprueba los tipos de TypeScript?

No. Vite solo transpila TypeScript. Ejecuta tsc --noEmit, o el comando de comprobación de tipos de tu framework, en la CI o como proceso aparte durante el desarrollo.

¿Qué versión de Node.js necesita Vite?

Vite 8 requiere Node.js 20.19+ o 22.12+. Algunas plantillas pueden pedir una versión más reciente.

¿Vite funciona con React y Vue?

Sí. Las plantillas oficiales cubren React, Vue, Preact, Svelte, Solid, Lit y Qwik, y Vite ofrece una API de HMR que los plugins de los frameworks usan para actualizar sin recargar toda la página.

¿Cómo leo variables de entorno en Vite?

Con import.meta.env. Solo las variables con el prefijo VITE_ llegan al código cliente, y debes reiniciar el servidor de desarrollo tras cambiar los archivos .env.