¿Qué es Vite?

"Vite" significa "rápido" en francés.

Herramienta de desarrollo moderna y rápida.

Creada por Evan You, el creador de Vue.js.

Alternativa a Webpack y Create React Application (CRA).

Usos

Transpilaciones más rápidas.

Recarga instantánea al guardar cambios.

Eliminación de bundle innecesario en desarrollo.

Builds optimizados en producción.

¿Cómo funciona Vite?

Modo Desarrollo:

Utiliza ES Modules nativos del navegador.

Modo Producción:

Usa Rollup para empaquetar y optimizar.

Vite + React

Plantillas oficiales para React y React + TypeScript.

Incluye JSX + Fast Refresh listos para usar.

Más rápido y ligero que Create React App (CRA).

Crear un Proyecto

                        
npm create vite@latest
cd my-app
npm install
npm run dev
                        
                    

JSX, CSS y Assets

JSX funciona nativamente sin configuración adicional.

Importar CSS directamente en los componentes.

Importar imágenes con `import` o usar la carpeta public/.

Build de Producción

npm run build

Se genera carpeta /dist lista para desplegar.

Netlify, Vercel, Firebase, GitHub Pages, etc.

Buenas Prácticas

• Separar componentes y assets
• Integrar ESLint y Prettier
• Extensiones de Vite y DevTools

Aliases

Los alias permiten usar rutas más limpias y consistentes al importar módulos.

resolve: {
    alias: {
        '@pages': '/src/pages',
        '@components': '/src/components',
        '@hooks': '/src/hooks',
        '@assets': '/src/assets',
        '@styles': '/src/styles'
    }
}
                  

Se puede importar archivos sin usar rutas relativas largas como:

// Sin alias
import Card from '../../../components/ui/Card'
                  

Con alias:

import Card from '@components/ui/Card'
                  

Ventajas:

• Código más limpio y legible
• Menos errores al mover archivos
• Ayuda a mantener una estructura clara del proyecto