Actualités,  Laravel 9

Vite !

Il existe plusieurs empaqueteurs (bundlers) qui permettent de regrouper nos fichiers Javascript et CSS, de compresser nos images, de lancer un transpiler… Le plus célèbre est certainement Webpack, mais il a de sérieux concurrents comme Parcel.

Laravel utilisait jusque-là Webpack par l’intermédiaire de Mix qui est un utilitaire très pratique pour éviter de se prendre la tête avec les subtilités de Webpack. Mais les choses ont récemment changé pour Laravel et Webpack a été mis au placard. Cela au profit d’un nouveau venu : Vite. Par la même occasion, Mix a également rejoint une étagère dans le même placard.

Pourquoi ce changement ? Nous vivons dans un monde où la vitesse est privilégiée et c’est la principale raison de ce changement. Ceux qui sont habitués aux lenteurs de Webpack au travers de Mix devraient apprécier la stupéfiante vitesse de Vite qui porte très bien son nom.

Pour avoir un premier ressenti de cette vitesse, créez une application Laravel avec Breeze (avec Vue par exemple) :

composer create-project laravel/laravel vite
composer require laravel/breeze --dev
php artisan breeze:install vue
npm install

Il ne nous reste plus qu’à compiler les assets avec la commande habituelle et c’est là que les choses vont changer :

npm run dev

Auparavant, quand on tapait cette commande, on savait qu’on devait attendre un certain temps, maintenant on a le résultat pratiquement instantanément :

Ça n’a pris que 435 ms !

On trouve un nouveau fichier de configuration :

Avec ce code de base :

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

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

On voit qu’en plus de Vite, on charge un plugin de Laravel, il va bien nous simplifier la vie !

On trouve ce plugin avec tous les paquets chargés par npm :

D’autre part, on trouve un point d’entrée pour Javascript mais pas pour le CSS…

L’installation avec Vue charge aussi Inertia et il paraît que Vite fonctionne mieux si on charge le CSS par Javascript :

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

Maintenant, comment est-ce qu’on fait l’intégration dans le HTML ? On dispose d’une nouvelle directive avec Blade :

<head>
    ...
    @vite('resources/js/app.js').
</head>

Et Vite se charge de tout ! Y compris le Hot Module Replacement en mode développement.

On trouve une documentation qui ne semble pas encore complètement au point ici.

Pour les nostalgiques de Mix, il est encore possible de l’utiliser. Il existe un processus de migration de Vite vers Mix.

On peut se réjouir de voir que la langue française n’est pas morte et qu’elle est utilisée ici !

Pour tout savoir sur Vite c’est ici que ça se passe.

Print Friendly, PDF & Email

9 commentaires

  • jire

    Bonjour monsieur bestmomo svp je fait tout ce que vous vounait de nous dire mais je cette erreur .

    Class « Inertia\Middleware » not found

    avec ce code,

    app
     / 
    Http
     / 
    Middleware
     / 
    HandleInertiaRequests
    .php

    : 9

    <?php

    namespace App\Http\Middleware;

    use Illuminate\Http\Request;

    use Inertia\Middleware;

    use Tightenco\Ziggy\Ziggy;

    class HandleInertiaRequests extends Middleware

    {

    /**

    * The root template that is loaded on the first page visit.

    *

    * @var string

    */

    protected $rootView = 'app';

    /**

    * Determine the current asset version.

    *

    * @param \Illuminate\Http\Request $request

    * @return string|null

    */

    public function version(Request $request)

    {

    return parent::version($request);

    }

Laisser un commentaire