Bundle degli asset con Vite - Knowledge of Laravel

Laravel e Vite

Vite è un tool di build frontend veloce. In sviluppo offre HMR (Hot Module Replacement), in produzione asset ottimizzati. Da Laravel 9 Vite è lo strumento di build frontend standard, integrato tramite laravel-vite-plugin. Il plugin si occupa di:

Gestione degli entry point
HMR nel dev server
Integrazione con la direttiva @vite() di Blade
Versioning degli asset in build (cache busting)

Se usi uno starter kit di Laravel, Vite e Tailwind sono già configurati. Qui vediamo come farlo da zero.

Per il ruolo di Vite nell’intera configurazione frontend consulta prima Frontend.

Installazione e configurazione

Verifica di Node

Servono Node.js (16+) e npm.

node -v
npm -v

Installazione dei pacchetti

Nei progetti nuovi package.json include già vite e laravel-vite-plugin.

npm install

vite.config.js

Nella root trovi vite.config.js con gli entry point.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

In SPA/Inertia si consiglia di importare il CSS da JavaScript: togli resources/css/app.css dagli entry point e in resources/js/app.js aggiungi import '../css/app.css';.

Server di sviluppo

In sviluppo npm run dev. Salvando i file, il browser si aggiorna (HMR).

npm run dev

Insieme al server Laravel:

composer run dev

composer run dev avvia insieme php artisan serve e npm run dev.

Reload automatico delle viste Blade

Con refresh: true il browser si ricarica quando salvi Blade o route.

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,
        }),
    ],
});

Monitorate:

resources/views/**
app/Livewire/**
routes/**
lang/**

Build di produzione

Prima del deploy esegui npm run build.

npm run build

Output in public/build/:

public/
  build/
    assets/
      app-Cv82Mlke.css
      app-DnAZBF4U.js
    manifest.json

manifest.json mappa nomi e hash: @vite() lo consulta.

Aggiungi public/build/ a .gitignore. Fai il build a destinazione o in CI.

Caricamento asset da Blade

Aggiungi @vite() nel <head>.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ config('app.name') }}</title>

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

Se importi il CSS da JS, indica solo il JS.

@vite('resources/js/app.js')

@vite() cambia comportamento tra sviluppo e produzione.

Situazione	Comportamento
Dev server attivo	Carica dal dev server con HMR
Produzione (build)	Consulta `manifest.json` e carica versionato

Entry point JavaScript e CSS

JavaScript

resources/js/app.js è l’entry principale.

import './bootstrap';
import '../css/app.css';

// Moduli personali
import './components/modal';
import './utils/format';

CSS

/* Con Tailwind */
@import 'tailwindcss';

/* Custom */
body {
    font-family: 'Inter', sans-serif;
}

Più entry point

Per admin ecc.:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
            'resources/css/admin.css',
            'resources/js/admin.js',
        ]),
    ],
});

In Blade:

@vite(['resources/css/admin.css', 'resources/js/admin.js'])

Integrazione con Tailwind CSS

Tailwind v4+ è integrato via plugin Vite.

Installa Tailwind

npm install tailwindcss @tailwindcss/vite

Aggiungi il plugin

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        tailwindcss(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Importa in CSS

@import 'tailwindcss';

Con Tailwind v3 servono tailwind.config.js e postcss.config.js. Non richiesti in v4.

Alias

Il plugin imposta l’alias @ su resources/js.

import UserCard from '@/components/UserCard.vue';

Alias personali:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js']),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
            '@css': '/resources/css',
            '@images': '/resources/images',
        },
    },
});

import logo from '@images/logo.png';
import '@css/custom.css';

Impostazioni per framework

Vue

npm install --save-dev @vitejs/plugin-vue

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js']),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

React

npm install --save-dev @vitejs/plugin-react

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.jsx']),
        react(),
    ],
});

Con React aggiungi @viteReactRefresh prima di @vite.

@viteReactRefresh
@vite('resources/js/app.jsx')

Asset statici

Con l’opzione assets gestisci il versioning di immagini e font referenziati da Blade.

laravel({
    input: 'resources/js/app.js',
    assets: ['resources/images/**', 'resources/fonts/**'],
})

In Blade usa Vite::asset().

<img src="{{ Vite::asset('resources/images/logo.png') }}" alt="Logo">

Riepilogo

Obiettivo	Metodo
Avviare dev server	`npm run dev`
Build produzione	`npm run build`
Caricare asset da Blade	`@vite([...])`
Auto reload delle viste	`refresh: true` in `vite.config.js`
Usare Tailwind	Plugin `@tailwindcss/vite`
Alias `@`	`resources/js`
Versionare asset statici	Opzione `assets` + `Vite::asset()`

Prossimi passi

Cache

Migliora ulteriormente le prestazioni con la cache di Laravel.

​Laravel e Vite

​Installazione e configurazione

​Verifica di Node

​Installazione dei pacchetti

​vite.config.js

​Server di sviluppo

​Reload automatico delle viste Blade

​Build di produzione

​Caricamento asset da Blade

​Entry point JavaScript e CSS

​JavaScript

​CSS

​Più entry point

​Integrazione con Tailwind CSS

​Alias

​Impostazioni per framework

​Vue

​React

​Asset statici

​Riepilogo

​Prossimi passi

Cache

Laravel e Vite

Installazione e configurazione

Verifica di Node

Installazione dei pacchetti

vite.config.js

Server di sviluppo

Reload automatico delle viste Blade

Build di produzione

Caricamento asset da Blade

Entry point JavaScript e CSS

JavaScript

CSS

Più entry point

Integrazione con Tailwind CSS

Alias

Impostazioni per framework

Vue

React

Asset statici

Riepilogo

Prossimi passi