Vite

Cómo funciona

El servidor de desarrollo sirve módulos y actualiza los que cambian mediante HMR. La construcción de producción genera recursos optimizados. Los plugins añaden integración con frameworks y otras transformaciones.

Ejemplo: iniciar una aplicación React

Con Node.js y pnpm compatibles con la versión de Vite elegida:

pnpm create vite portal --template react-ts
cd portal
pnpm install
pnpm dev

El proyecto generado incluye comandos de construcción. Su salida necesita un alojamiento adecuado a la estrategia de la aplicación.

Por qué es rápido

En desarrollo Vite no empaqueta la aplicación: sirve módulos ES nativos y el navegador pide solo los que necesita. Las dependencias de node_modules se preempaquetan una vez con un bundler muy rápido. En producción sí empaqueta, con división de código, minificación y hashes en los nombres de archivo para caché de larga duración.

Configuración típica

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

export default defineConfig({
  plugins: [react()],
  base: '/portal/', // si se sirve bajo una subruta
  server: {
    port: 5173,
    proxy: { '/api': 'http://localhost:8080' }, // evita CORS en desarrollo
  },
  build: {
    sourcemap: true,
    target: 'es2022',
  },
});

Variables de entorno

Archivo	Cuándo se carga
.env	Siempre
.env.local	Siempre, ignorado por git
.env.[modo]	En el modo indicado (development, production, staging)

Solo las variables con prefijo VITE_ llegan al navegador mediante import.meta.env.VITE_API_URL. Todo lo que se expone así es público: nunca pongas secretos. Para un mismo artefacto en varios entornos, sirve la configuración en tiempo de ejecución (un config.json cargado al arrancar) en lugar de recompilar por entorno.

Optimizar el bundle

• Carga diferida de rutas con import() dinámico (React.lazy, rutas asíncronas).
• Analiza el tamaño con rollup-plugin-visualizer o similar.
• Evita importar librerías completas cuando solo usas una función (iconos, utilidades de fechas).
• vite preview sirve la build localmente para probarla; no es un servidor de producción.

Ecosistema

Vite es la base de Nuxt, SvelteKit (Svelte), Astro, Remix/React Router y Vitest para pruebas, que reutiliza la misma configuración y transformaciones. Las versiones recientes incorporan Rolldown, un bundler en Rust, para unificar desarrollo y producción.

Migrar desde Create React App o webpack

1. Mover index.html a la raíz y referenciar el punto de entrada con <script type="module" src="/src/main.tsx">.
2. Cambiar process.env.REACT_APP_* por import.meta.env.VITE_*.
3. Sustituir loaders de webpack por plugins o soporte nativo (CSS modules, assets, JSON vienen incluidos).
4. Revisar alias de rutas en resolve.alias y en tsconfig.json.

Criterios de implementación

No confundas servidor de desarrollo con servidor de producción. Revisa rutas base y variables públicas: las que llegan al código del navegador son visibles para el usuario. En frameworks que ya integran Vite, utiliza primero su configuración y comandos.