GlosarioFrontend

¿Qué es Vite?

Vite es la herramienta de compilacion de assets frontend integrada en Laravel que reemplaza a Webpack/Mix, ofreciendo Hot Module Replacement (HMR) instantaneo y compilacion ultrarapida de JavaScript, CSS y TypeScript.

Vite

Vite es la herramienta de compilacion de assets frontend incluida por defecto en Laravel desde la version 10. Reemplaza a Laravel Mix (Webpack) con una alternativa mucho mas rapida.

Configuracion

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true, // Refresco automatico al cambiar archivos Blade
        }),
    ],
});

Uso en Blade

<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Comandos

# Servidor de desarrollo con HMR
npm run dev

# Compilar para produccion
npm run build

Integracion con frameworks

Vite funciona perfectamente con Vue.js, React, TypeScript, Tailwind CSS y cualquier herramienta del ecosistema frontend moderno. El plugin de Laravel gestiona automaticamente las URLs de los assets y el manifiesto de produccion.

La principal ventaja de Vite sobre Webpack es la velocidad: el HMR es practicamente instantaneo porque usa ESM nativo del navegador durante el desarrollo, sin necesidad de compilar el bundle completo.

TinkerPest