Mantén tus compilaciones de Vite extremadamente rápidas usando configuraciones de empaquetado personalizadas y capas de caché.

Vite es ultrarrápido desde el primer momento, pero a medida que las bases de código se expanden, las compilaciones de producción pueden ralentizarse debido a las pesadas etapas de compilación de Rollup. Esta guía describe cómo optimizar tus compilaciones usando manualChunks, configuraciones de minificación de esbuild y configuraciones de pre-empaquetado de dependencias.

1. División de código: Equilibrando tamaños de activos

Por defecto, Vite agrupa el código de tu aplicación en scripts unificados. Para evitar descargar JavaScript innecesario durante la carga inicial de la página, los desarrolladores deben implementar estrategias robustas de división de código.

1) Aprovecha las importaciones dinámicas

La forma más fácil de dividir activos es usando importaciones dinámicas. Esto aísla los endpoints del router para que las páginas solo obtengan código cuando un usuario navega hacia ellas.

// Ejemplo de React con rutas lazy-loaded
import { lazy } from 'react';
const HeavyDashboard = lazy(() => import('./pages/Dashboard'));

2) División de módulos pesados con manualChunks

Las dependencias externas (como react-dom, lodash o chart.js) raramente cambian. Agruparlas en chunks de vendor permite que el navegador las almacene en caché permanentemente, ignorando las actualizaciones a nivel de aplicación.

Fragmento de división en vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
});

2. Reduciendo tiempos de compilación

1) Elige el minificador adecuado (Esbuild vs. Terser)

Vite usa esbuild por defecto para la minificación de código, que es hasta 40 veces más rápido que las opciones tradicionales basadas en JavaScript. A menos que tu equipo requiera compatibilidad con ES5 obsoleto u ofuscación estricta (que justifica terser), quédate con minify: 'esbuild'.

2) Deshabilitar mapas de fuente en producción

Generar mapas de fuente (archivos .map) durante las compilaciones de producción consume asignaciones masivas de memoria y ralentiza los ciclos de compilación. Desactívalos si tu pipeline de servidor no los requiere explícitamente para el seguimiento de errores.

// vite.config.js
export default defineConfig({
  build: {
    sourcemap: false
  }
});

3. Estabilizando el servidor de desarrollo: Pre-empaquetado de dependencias

Cuando inicias Vite, pre-empaqueta los módulos de terceros en Módulos ES (ESM) estandarizados para optimizar el caché del navegador.

Si Vite descubre una importación dinámica durante el tiempo de ejecución que fue omitida de la etapa de pre-empaquetado, se ve obligado a re-ejecutar el empaquetador y recargar la página del navegador. Previene este comportamiento indexando explícitamente las importaciones pesadas:

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    include: ['heavy-editor-plugin', 'chart.js']
  }
});

4. Conclusión: Auditoría de bundles

Mantener el rendimiento de compilación requiere observación continua. Instala herramientas como rollup-plugin-visualizer para graficar la composición de tus bundles. Al rastrear los tamaños de los módulos, dividir las dependencias vendor y deshabilitar los mapas de fuente redundantes, tu pipeline de compilación de Vite se mantendrá rápido y eficiente.