asyrafhussin/react-vite-best-practices

¿Qué hace react-vite-best-practices?

Guías de optimización de rendimiento para React y Vite. Úsalo al escribir, revisar u optimizar componentes React construidos con Vite. Se activa en tareas que involucran configuración de Vite, optimización de compilación, división de código, carga diferida, HMR, tamaño del bundle o rendimiento de React.

Introducción

Este skill proporciona prácticas recomendadas para maximizar el rendimiento de aplicaciones React construidas con Vite. Cubre desde la configuración inicial de Vite hasta técnicas avanzadas de optimización en producción.

Configuración de Vite

Configuración base recomendada

// vite.config.js
export default defineConfig({
  build: {
    target: 'es2020',
    minify: 'esbuild',
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
  optimizeDeps: {
    include: ['react', 'react-dom'],
  },
})

División de código (Code Splitting)

Usa React.lazy() y Suspense para dividir el código en fragmentos más pequeños:

import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Cargando...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Carga diferida (Lazy Loading)

Para imágenes y componentes que no son críticos inmediatamente:

import { LazyLoadImage } from 'react-lazy-load-image-component';

<LazyLoadImage
  alt="Imagen de ejemplo"
  src="ruta/a/imagen.jpg"
  effect="blur"
/>

Optimización de HMR

Configura HMR para una experiencia de desarrollo más rápida:

// vite.config.js
export default defineConfig({
  server: {
    hmr: {
      overlay: false, // Desactiva el overlay de errores si es molesto
    },
  },
})

Reducción del tamaño del bundle

• Activa tree shaking automático de Vite.
• Usa compresión con vite-plugin-compression.
• Elimina dependencias no utilizadas.

Buenas prácticas de React

• Usa React.memo() para evitar renderizados innecesarios.
• Emplea useMemo y useCallback con cuidado.
• Evita el abuso de efectos secundarios (useEffect).

Referencias

• Documentación de Vite
• Documentación de React