¿Qué es Vite?

¿Qué es Vite?

Vite (pronunciado "vit", francés para "rápido") es una herramienta moderna de build frontend creada por Evan You (también creador de Vue.js). Acelera dramáticamente el bucle de retroalimentación de desarrollo sirviendo archivos fuente como módulos ES nativos durante el desarrollo y usando Rollup para producir bundles optimizados para producción. Lanzada en 2020 y estable desde Vite 2.0 (2021), Vite se ha convertido en la herramienta de build predeterminada para Vue 3, SvelteKit y Astro, y es cada vez más elegida para proyectos React sobre Create React App (que está deprecated).

El pitch es simple: los arranques en frío del servidor dev son inferiores a un segundo, incluso para proyectos grandes, y las actualizaciones de hot module reload (HMR) se sienten instantáneas independientemente del tamaño del proyecto. La razón: Vite envía tu código fuente al navegador como módulos ES nativos durante el desarrollo, dejando que el navegador haga el trabajo pesado de resolución de dependencias. Sin paso de bundling en cada cambio.

La arquitectura de dos modos

Vite opera de manera diferente en dev vs. producción:

Modo desarrollo: ESM nativo

El servidor dev sirve tus archivos fuente directamente al navegador como módulos ES nativos. El navegador solicita App.vue, Vite lo transforma sobre la marcha (compilando Vue/JSX/TypeScript) y lo devuelve. Las importaciones son resueltas por el navegador. No se construye un bundle por adelantado.

La optimización clave: solo se procesan los archivos que el navegador realmente solicita. Si nunca visitas /admin, ninguno de esos archivos se compila. Por eso incluso proyectos de 10,000 archivos arrancan instantáneamente.

Las dependencias (node_modules) se pre-bundlean con esbuild (basado en Go, ~10-100x más rápido que los bundlers JavaScript) en un único archivo ESM por librería, así el navegador no hace 100+ peticiones por una librería.

Modo producción: bundling con Rollup

Para producción, Vite usa Rollup para producir bundles optimizados. Code splitting, tree shaking, hash de assets, extracción de CSS — todas las características estándar de build de producción. La salida es un directorio dist/ estático listo para subir a cualquier CDN o host estático.

Por qué Vite es más rápido que webpack

El patrón es consistente: webpack hace demasiado trabajo por adelantado; Vite difiere el trabajo hasta que se necesita.

Lo que funciona out-of-the-box

• TypeScript (con esbuild para transpilación; el type-checking es separado vía tsc --noEmit).
• JSX/TSX.
• CSS, módulos CSS, Sass, Less, Stylus.
• PostCSS detectado automáticamente desde postcss.config.js.
• Assets estáticos (.png, .svg, .json) importados directamente.
• Variables de entorno vía archivos .env (con prefijo VITE_ expuesto al código cliente, por seguridad).
• HMR para Vue, React, Svelte, vanilla JS.
• Importaciones glob (import.meta.glob).
• Importaciones de Web Worker (new Worker(new URL(...))).

El ecosistema de plugins

Los plugins de Vite usan una API de plugins compatible con Rollup extendida con hooks específicos de Vite. Plugins clave:

• @vitejs/plugin-vue, @vitejs/plugin-react — soporte oficial de framework.
• @vitejs/plugin-legacy — genera un bundle legacy para navegadores más antiguos (sin ESM nativo).
• vite-plugin-pwa — generación de service worker, manifest, soporte offline.
• unplugin-auto-import / unplugin-vue-components — auto-imports para funciones y componentes comunes (gran ganancia DX).
• vite-plugin-checker — ejecuta TypeScript y ESLint en paralelo durante dev.
• vite-imagetools — optimización de imágenes en tiempo de build.

Trampas comunes de Vite

• Process.env no funciona. Vite usa import.meta.env en su lugar, con prefijo VITE_. Migrar desde CRA requiere actualizar todas las referencias a env-vars.
• Las importaciones dinámicas necesitan rutas completas. import(`./pages/${name}.tsx`) no funciona como en webpack. Usa import.meta.glob para patrones dinámicos.
• La configuración SSR es más manual. Vite tiene soporte SSR pero la integración con framework está en tus manos. Usa Nuxt (Vue), SvelteKit (Svelte), Astro o Remix para SSR-out-of-the-box.
• esbuild no hace type-checking. Los errores de tipo no romperán tu servidor dev. Ejecuta tsc --noEmit en CI o usa vite-plugin-checker.
• Algunos plugins de webpack no tienen equivalentes en Vite. Casos de nicho (características específicas de module federation, manejo inusual de assets) pueden requerir workarounds.
• HMR puede romperse con estado global. Si tu código muta globales a nivel de módulo, HMR puede producir estado obsoleto. O evita el patrón o acepta full reload para esos módulos.

Vite vs. esbuild vs. Turbopack vs. webpack

• Vite — servidor dev (ESM nativo) + build prod basado en Rollup. Mejor para la mayoría de proyectos frontend modernos.
• esbuild — bundler puro (sin servidor dev). Usado por Vite bajo el capó para pre-bundling de dependencias. Úsalo directamente para librerías o scripts, no para apps completas.
• Turbopack — sucesor experimental de Next.js a webpack, escrito en Rust. Más rápido que webpack pero atado a Next.js. Menos maduro que Vite.
• webpack — el abuelo. Ecosistema de plugins más flexible, pero lento para proyectos modernos. Aún está bien para legacy o apps con requisitos inusuales específicos de webpack.

VoidZero y el futuro comercial de Vite

Evan You comenzó VoidZero en 2024 para comercializar y acelerar todo el ecosistema Vite (Vite, Vitest, Rolldown, Oxc). La compañía busca proporcionar tooling empresarial y consultoría alrededor de Vite mientras mantiene el core open source. Esto señala sostenibilidad a largo plazo para Vite — ya no es un proyecto secundario del creador de Vue.

FAQ: Vite

¿Debería migrar de webpack a Vite?

Para la mayoría de proyectos, sí — la mejora en experiencia dev es dramática. El coste de migración depende de tu config específica de webpack. Las apps estándar React/Vue/Svelte migran en 1-3 días. Las apps con plugins custom de webpack, module federation o interop pesado de CommonJS pueden tomar 1-3 semanas.

¿Está Vite listo para producción?

Sí, mucho. Vite ha sido estable desde 2.0 (2021). Adoptantes mayores incluyen Shopify, GitLab, Cypress, Storybook, Replit. Los bundles de producción (vía Rollup) están battle-tested.

¿Funciona Vite con React?

Sí. Usa @vitejs/plugin-react para React estándar o @vitejs/plugin-react-swc para fast refresh basado en SWC. La mayoría de equipos migrando desde Create React App eligen Vite.

¿Puede Vite hacer renderizado del lado del servidor?

Sí — Vite tiene APIs SSR. Pero integrarlas es complicado; para la mayoría de equipos, usa un meta-framework que envuelva Vite (Nuxt, SvelteKit, Astro, Remix, Solid Start).

¿Qué es Rolldown?

Rolldown es el reemplazo basado en Rust para Rollup que VoidZero está construyendo. Será compatible drop-in con la API de plugins de Rollup pero mucho más rápido. Cuando esté estable, Vite usará Rolldown para builds de producción, eliminando la discrepancia de tooling dev/prod (esbuild para dev, Rollup para prod).

¿En qué se diferencia Vite de Vitest?

Vitest es el ejecutor de pruebas unitarias que usa el pipeline de Vite (así que las pruebas comparten las mismas transformaciones y config que tu app). Creado por el mismo equipo. Reemplazo drop-in para Jest en proyectos Vite.

Cómo se relaciona LoadFocus con apps construidas con Vite

Las apps construidas con Vite todavía necesitan que sus tamaños de bundle y rendimiento de runtime sean validados. El mismo JavaScript que carga rápido gracias al tree-shaking de Rollup todavía necesita renderizar rápidamente en dispositivos lentos. Las pruebas de velocidad de sitio web LoadFocus validan Core Web Vitals en condiciones reales de red a través de 30+ ubicaciones. La monitorización de API cubre los endpoints de backend que tu SPA construida con Vite llama — la optimización de bundle no ayuda si la API es lenta.