Vite se ha ganado su reputación como una herramienta de compilación frontend rápida, especialmente en el inicio del servidor de desarrollo. Este artículo desglosa por qué Vite es rápido y explora ajustes de configuración para llevar el rendimiento de compilación aún más lejos.

Por qué Vite es rápido

La diferencia clave entre Vite y los empaquetadores tradicionales como Webpack es que Vite usa diferentes estrategias para desarrollo y producción.

Dev: Servicio nativo de módulos ES

Durante el desarrollo, Vite omite el empaquetado por completo. Aprovecha el soporte nativo de módulos ES del navegador, transformando y sirviendo solo los archivos solicitados. Esto significa que el inicio del servidor de desarrollo sigue siendo instantáneo sin importar cuán grande sea tu proyecto.

Producción: Optimización con Rollup

Para compilaciones de producción, Vite usa Rollup internamente para manejar tree-shaking y división de código. Todo se configura a través de un solo archivo vite.config.ts.

Ajustes de rendimiento

Pre-empaquetado de dependencias

Vite pre-empaqueta las dependencias de node_modules anticipadamente. Esto ocurre en el primer npm run dev y se almacena en caché, haciendo que los inicios posteriores sean mucho más rápidos.

Usa optimizeDeps.exclude si necesitas forzar ciertas dependencias fuera del paso de pre-empaquetado:

export default defineConfig({
  optimizeDeps: {
    exclude: ['large-dependency']
  }
})

manualChunks para paquetes más inteligentes

Para optimizar el tamaño de salida de producción, configura build.rollupOptions.output.manualChunks. Dividir paquetes por biblioteca mejora la eficiencia del caché del navegador:

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@mui/material', '@emotion/react']
        }
      }
    }
  }
})

Esto divide las bibliotecas de React en un chunk vendor y MUI en un chunk ui. Cuando actualizas solo el código de la aplicación, el caché de la biblioteca permanece intacto.

Aliases de ruta

Configurar aliases de ruta como @/components/Button mantiene las declaraciones de importación limpias y legibles:

import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

No olvides reflejar el alias en tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Variables de entorno

Accede a las variables de entorno en Vite mediante import.meta.env.VITE_*. Coloca archivos .env en la raíz de tu proyecto para cambiar valores entre desarrollo y producción sin sobrecarga en tiempo de ejecución — las variables se insertan estáticamente en tiempo de compilación.

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

# .env.development
VITE_API_URL=http://localhost:3000

Inspeccionando la salida de compilación de producción

Para visualizar el tamaño del paquete, usa el plugin vite-bundle-analyzer:

npm add -D vite-bundle-analyzer

Agrégalo a vite.config.ts y la próxima compilación te mostrará exactamente qué módulos consumen más espacio.

Resumen

Vite es bastante rápido desde el primer momento, pero agregar ajustes básicos como la división manual de chunks y los aliases de ruta hace que el desarrollo y el despliegue en producción sean aún más fluidos. Comienza con un proyecto pequeño, experimenta con estas configuraciones y encuentra la configuración que funcione mejor para tu equipo.