Vite

¿Qué es Vite?

Vite es una herramienta de construcción (build tool) con dos funciones principales: un servidor de desarrollo que está listo casi al instante y una construcción de producción que genera bundles optimizados. Fue creado por Evan You en 2020 y se ha convertido en la toolchain predeterminada para la mayoría de los frameworks de front-end modernos.

La idea clave es que el desarrollo y la producción tienen cuellos de botella diferentes. En desarrollo, buscas un inicio rápido y actualizaciones veloces, por lo que Vite no realiza ningún bundle; en su lugar, sirve el código fuente a través de módulos ES nativos y transforma los archivos bajo demanda. En producción, buscas el resultado más pequeño y rápido posible, por lo que Vite utiliza Rollup para empaquetar y optimizar.

El servidor de desarrollo

Ejecutar vite inicia un servidor de desarrollo que sirve tu código fuente como módulos ES nativos. El navegador solicita cada módulo y Vite lo transforma sobre la marcha.

# terminal
vite          # start the dev server
vite build    # production build
vite preview  # preview the production build locally

Debido a que no hay que generar un bundle completo, el inicio se mide en milisegundos y se mantiene constante a medida que el proyecto crece. Las dependencias se pre-bundlean una sola vez con esbuild, ya que cambian rara vez, lo que evita una avalancha de solicitudes pequeñas. El hot module replacement actualiza entonces solo los módulos que han cambiado, preservando el estado de la aplicación siempre que sea posible.

El build de producción

vite build ejecuta el pipeline de Rollup y escribe el resultado en dist por defecto.

• Tree-shaking: elimina las exportaciones que no se utilizan.
• Code splitting: genera chunks para las rutas e importaciones dinámicas.
• Minification: reduce el tamaño de JavaScript, CSS y HTML.
• Asset hashing: añade hashes de contenido para permitir el almacenamiento en caché a largo plazo.
• CSS handling: extrae y minifica las hojas de estilo.

El resultado es un conjunto de archivos estáticos que puedes desplegar en cualquier host, CDN o plataforma estática.

Configuración

Vite lee un archivo vite.config.ts en la raíz del proyecto.

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { "@": "/src" },
  },
  server: {
    port: 5173,
    proxy: {
      "/api": "http://localhost:8787",
    },
  },
  build: {
    outDir: "dist",
    sourcemap: true,
  },
});

La opción resolve.alias crea accesos directos de importación, y server.proxy redirige las solicitudes de la API a un backend durante el desarrollo, lo que evita problemas de CORS. La mayoría de las configuraciones de frameworks generan este archivo automáticamente y solo requieren pequeñas adiciones.

Plugins

Los plugins son la forma en que Vite brinda soporte a frameworks y herramientas. Implementan una interfaz compatible con Rollup junto con hooks específicos de Vite.

// plugins.ts
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue()],
});

Los plugins más comunes cubren React, Vue, Svelte y Solid, además de herramientas de CSS como Tailwind, soporte para navegadores antiguos, funciones de PWA y análisis de bundles. Debido a que la interfaz es compatible con Rollup, una gran parte del ecosistema de plugins de Rollup funciona directamente.

Variables de entorno

Vite carga las variables desde archivos .env y expone al código del cliente únicamente aquellas que tengan el prefijo VITE_.

# .env
VITE_API_URL=https://api.example.com
DB_PASSWORD=secret

// env.ts
const url = import.meta.env.VITE_API_URL;
const isDev = import.meta.env.DEV;

El prefijo VITE_ es un mecanismo de seguridad: cualquier variable que no lo tenga quedará fuera del bundle del cliente, evitando así que se filtren secretos por accidente. Las variables se reemplazan en tiempo de compilación (build time), no se leen en tiempo de ejecución (runtime), y se accede a ellas a través de import.meta.env.

Assets y CSS

Importas los assets directamente desde JavaScript y Vite se encarga del resto.

// assets.ts
import logo from "./logo.svg";
import "./styles.css";
import styles from "./Button.module.css";

Los assets pequeños se incluyen en línea como data URLs, los más grandes se generan con nombres hasheados, y el CSS importado de esta manera se empaqueta y, en desarrollo, se recarga en caliente (hot-reload). El directorio public es para archivos que deben mantener una ruta exacta, como robots.txt o un favicon referenciado por URL.

Code splitting

El import() dinámico crea un chunk separado que se carga bajo demanda, lo cual es la herramienta principal para mantener el bundle inicial pequeño.

// lazy.ts
const { Chart } = await import("./Chart");

Aplícalo a rutas, modales, editores y cualquier funcionalidad que no sea necesaria en el primer renderizado (first paint). Los frameworks basados en Vite suelen gestionar la división a nivel de rutas automáticamente, pero comprender la primitiva es útil cuando necesitas un control más preciso.

Más allá de la aplicación

Vite no es solo para aplicaciones de una sola página. El Library mode permite crear un paquete distribuible con los formatos adecuados y las dependencias externalizadas. Vite también es compatible con server-side rendering y es el motor interno de Vitest, Astro, Nuxt y SvelteKit. Esa base compartida es la razón por la cual la misma configuración, aliases y plugins funcionan tanto en el desarrollo como en las pruebas y la compilación.

Mejores prácticas

• Mantén la configuración al mínimo y deja que los plugins del framework gestionen los detalles.
• Usa resolve.alias para tener importaciones limpias en lugar de rutas relativas largas.
• Configura un proxy para la API en desarrollo en lugar de escribir el host a mano.
• Prefija las variables de entorno del cliente con VITE_ y mantén los secretos sin prefijo.
• Divide las funcionalidades pesadas mediante importaciones dinámicas.
• Importa los assets desde JavaScript para que sean optimizados y se les asigne un hash.
• Habilita los source maps para producción si utilizas un rastreador de errores.

Errores comunes

• Esperar process.env en el código del cliente en lugar de import.meta.env.
• Exponer secretos al anteponerles el prefijo VITE_.
• Colocar archivos en public que deberían ser importados y procesados con un hash.
• Enviar un único bundle enorme al no utilizar nunca importaciones dinámicas.
• Añadir plugins que duplican la funcionalidad de un plugin del framework.
• Pelearse con la configuración en lugar de utilizar un preset del framework.

Próximos pasos

Vite es la base de la cadena de herramientas moderna. Compáralo con Webpack para proyectos más antiguos, ejecuta pruebas con Vitest y mira cómo potencia los frameworks en las guías de React, Astro y SvelteKit. Después, abre el vite.config.ts de un proyecto y realiza un cambio deliberado para observar el efecto.