Vite: la guia definitiva para la herramienta de build mas rapida de 2026

Vite se ha convertido en la herramienta de construcción (build tool) más popular del ecosistema JavaScript en 2026. Creada por Evan You (el mismo creador de Vue.js), Vite ha revolucionado la experiencia de desarrollo al ofrecer arranques instantáneos y recargas en caliente ultrarrápidas. En esta guía completa aprenderás todo lo que necesitas saber sobre Vite: qué es, cómo funciona, cómo configurarlo y cómo usarlo con tus frameworks favoritos.

¿Qué es Vite y por qué es tan rápido?

Vite (pronunciado «vit», que significa «rápido» en francés) es un servidor de desarrollo y bundler de producción que aprovecha dos características modernas del ecosistema web: los ES Modules nativos del navegador en desarrollo y Rollup para la construcción de producción.

El problema que resuelve Vite es el de las herramientas tradicionales como webpack o Create React App. Estas herramientas, cuando arrancas el servidor de desarrollo, tienen que procesar y empaquetar todo tu código antes de que puedas ver algo en el navegador. Con proyectos grandes, esto puede tardar entre 30 y 60 segundos (o más). Cada cambio que haces también requiere recompilar partes del proyecto.

Vite resuelve esto de dos formas elegantes. Primero, divide los módulos en dos categorías: dependencias (que raramente cambian) y código fuente (que cambia constantemente). Las dependencias se pre-empaquetan una sola vez con esbuild (escrito en Go, entre 10 y 100 veces más rápido que bundlers en JavaScript). El código fuente se sirve directamente como ESM nativo al navegador, sin empaquetar. El navegador hace el trabajo de importar los módulos bajo demanda.

Vite vs webpack vs Create React App: comparativa real

Característica	Vite	webpack 5	Create React App
Arranque del servidor dev	⚡ <1 segundo	🐢 10-60 segundos	🐢 15-45 segundos
Hot Module Replacement	⚡ Instantáneo	🔄 1-5 segundos	🔄 2-10 segundos
Configuración inicial	✅ Mínima	⚠️ Compleja	✅ Ninguna (pero cerrada)
Bundler de producción	Rollup	webpack	webpack
Soporte TypeScript	✅ Nativo	⚠️ Requiere loader	✅ Incluido
Soporte frameworks	React, Vue, Svelte, Angular…	Cualquiera	Solo React
Mantenimiento activo	✅ Muy activo	✅ Activo	❌ Abandonado

Instalación y creación de tu primer proyecto con Vite

Crear un proyecto con Vite es extremadamente sencillo. Solo necesitas Node.js 18 o superior:

# Crear proyecto (te pedirá el nombre y el framework)
npm create vite@latest

# O directamente especificando todo
npm create vite@latest mi-proyecto -- --template react-ts

# Plantillas disponibles:
# vanilla, vanilla-ts
# vue, vue-ts
# react, react-ts
# preact, preact-ts
# lit, lit-ts
# svelte, svelte-ts
# solid, solid-ts

cd mi-proyecto
npm install
npm run dev

En segundos verás tu aplicación corriendo en http://localhost:5173. La velocidad de arranque es inmediatamente perceptible comparado con cualquier otra herramienta.

Estructura de un proyecto Vite

mi-proyecto/
├── public/                 # Archivos estáticos (favicon, imágenes sin procesar)
│   └── vite.svg
├── src/
│   ├── assets/            # Imágenes, fonts procesadas por Vite
│   ├── components/        # Tus componentes
│   ├── App.tsx            # Componente raíz
│   ├── main.tsx           # Punto de entrada
│   └── vite-env.d.ts      # Tipos de TypeScript para Vite
├── index.html             # HTML principal (punto de entrada, NO en /public)
├── vite.config.ts         # Configuración de Vite
├── tsconfig.json
└── package.json

Un detalle importante: el index.html está en la raíz del proyecto, no en /public. Vite lo trata como parte del grafo de módulos y lo procesa directamente. Esto te permite usar importaciones de módulos directamente en el HTML.

El archivo vite.config.ts: configuración completa

El corazón de Vite es su archivo de configuración. Aquí va una configuración completa y bien comentada para un proyecto React con TypeScript:

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

export default defineConfig(({ command, mode }) => {
  // Cargar variables de entorno según el modo (development, production)
  const env = loadEnv(mode, process.cwd(), '');

  return {
    plugins: [
      react(), // Plugin oficial de React con Fast Refresh
    ],

    // Alias de rutas: @ apunta a /src
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@components': path.resolve(__dirname, './src/components'),
        '@hooks': path.resolve(__dirname, './src/hooks'),
        '@services': path.resolve(__dirname, './src/services'),
        '@types': path.resolve(__dirname, './src/types'),
      },
    },

    // Configuración del servidor de desarrollo
    server: {
      port: 3000,
      open: true, // Abre el navegador automáticamente
      proxy: {
        // Redirige /api al backend para evitar problemas de CORS en desarrollo
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^/api/, ''),
        },
      },
    },

    // Optimización de dependencias
    optimizeDeps: {
      include: ['react', 'react-dom', 'react-router-dom'],
    },

    // Configuración del build de producción
    build: {
      outDir: 'dist',
      sourcemap: mode === 'development',
      minify: 'esbuild', // esbuild es mucho más rápido que terser
      rollupOptions: {
        output: {
          // Code splitting manual: separa vendor de tu código
          manualChunks: {
            vendor: ['react', 'react-dom'],
            router: ['react-router-dom'],
          },
        },
      },
      // Avisar si un chunk supera los 500KB
      chunkSizeWarningLimit: 500,
    },

    // Variables de entorno disponibles en el cliente
    define: {
      __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
    },
  };
});

Variables de entorno en Vite

Vite tiene un sistema de variables de entorno diferente a Node.js. Solo las variables con el prefijo VITE_ se exponen al cliente (una medida de seguridad para no filtrar secretos del servidor):

# .env (para todos los modos)
VITE_APP_TITLE=TuRinconDev App
VITE_API_URL=http://localhost:3000

# .env.development (solo en desarrollo)
VITE_API_URL=http://localhost:3000

# .env.production (solo en producción)
VITE_API_URL=https://api.turincondev.com

# Esto NO se expone al cliente (no tiene prefijo VITE_)
DB_PASSWORD=super_secreto

// Acceder a las variables en tu código
const apiUrl = import.meta.env.VITE_API_URL;
const titulo = import.meta.env.VITE_APP_TITLE;
const esProduccion = import.meta.env.PROD; // boolean
const esDesarrollo = import.meta.env.DEV;  // boolean
const modo = import.meta.env.MODE;         // 'development' | 'production'

// Para TypeScript, añade los tipos en vite-env.d.ts
interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_APP_TITLE: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Plugins esenciales de Vite en 2026

El ecosistema de plugins de Vite es muy rico. Estos son los más útiles para proyectos web profesionales:

npm install --save-dev   @vitejs/plugin-react         # Plugin oficial React (Fast Refresh)
  vite-plugin-pwa              # Progressive Web App (service worker, manifest)
  vite-tsconfig-paths          # Resolución automática de paths de tsconfig
  @vitejs/plugin-legacy        # Soporte para navegadores legacy
  rollup-plugin-visualizer     # Visualizar el bundle (detectar bloat)
  vite-plugin-compression       # Comprimir assets con gzip/brotli

// vite.config.ts con todos los plugins
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
import tsconfigPaths from 'vite-tsconfig-paths';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths(), // Usa los paths de tsconfig.json automáticamente
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'Mi App',
        short_name: 'App',
        theme_color: '#00ffaa',
      },
    }),
    // Solo incluir el visualizador al analizar el bundle
    process.env.ANALYZE && visualizer({
      open: true,
      filename: 'dist/bundle-analysis.html',
    }),
  ].filter(Boolean),
});

Importaciones especiales en Vite

Vite añade capacidades de importación muy útiles que no existen en JavaScript estándar:

// Importar archivos como URL (para imágenes, fuentes, etc.)
import logoUrl from './assets/logo.svg';
// logoUrl = '/assets/logo-abc123.svg' (con hash para cache busting)

// Importar como string de texto
import css from './estilos.css?inline';
import svg from './icono.svg?raw';

// Importar JSON directamente (Vite lo procesa automáticamente)
import packageJson from '../package.json';
console.log(packageJson.version); // '1.0.0'

// Glob imports: importar múltiples archivos con un patrón
const modulos = import.meta.glob('./pages/*.tsx');
// { './pages/Home.tsx': () => import('./pages/Home.tsx'), ... }

// Eager: importar todos inmediatamente (sin lazy loading)
const modulosEager = import.meta.glob('./components/*.tsx', { eager: true });

// Worker: crear Web Workers fácilmente
import MiWorker from './worker.ts?worker';
const worker = new MiWorker();

Vite para proyectos de librería: modo lib

Si quieres crear y publicar una librería en npm, Vite tiene un modo especial para ello:

// vite.config.ts para una librería
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MiLibreria',
      formats: ['es', 'cjs', 'umd'],
      fileName: (format) => 'mi-libreria.' + format + '.js',
    },
    rollupOptions: {
      // Las dependencias externas no se incluyen en el bundle
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

Comandos esenciales de Vite

# Arrancar servidor de desarrollo
npm run dev

# Build de producción
npm run build

# Preview del build de producción en local
npm run preview

# Analizar dependencias (preoptimización)
npx vite optimize

# Ver la configuración final procesada
npx vite --config vite.config.ts inspect

Migrando de Create React App a Vite

Si tienes un proyecto con Create React App (que ya no recibe mantenimiento activo), migrar a Vite es muy recomendable. El proceso básico es:

Desinstala react-scripts e instala vite y @vitejs/plugin-react.
Crea un vite.config.ts con el plugin de React.
Mueve public/index.html a la raíz del proyecto y añade <script type="module" src="/src/main.tsx"></script>.
Cambia los scripts en package.json: start → vite, build → vite build.
Renombra las variables de entorno de REACT_APP_ a VITE_.
Cambia process.env.REACT_APP_X por import.meta.env.VITE_X.

Conclusión

Vite ha redefinido lo que esperamos de una herramienta de desarrollo web. El arranque instantáneo, el HMR ultrarrápido y la configuración mínima hacen que la experiencia de desarrollo sea significativamente más agradable y productiva. En 2026, elegir Vite para un nuevo proyecto web es, en la mayoría de los casos, la decisión más inteligente.

Si todavía usas webpack o Create React App y sientes que tu flujo de trabajo es lento, te animo a hacer la migración. Una vez que pruebes Vite, es muy difícil volver atrás. ¿Ya lo estás usando? Cuéntame tu experiencia en los comentarios.