Laravel 10

Cours Laravel 10 – 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 jusqu’à sa version 8 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 (choisissez vue)

À la fin de l’installation de Breeze Vite a été automatiquement lancé :

On trouve un 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 directive avec Blade :

<head>
    ...
     @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
</head>

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

Il y a deux façons de lancer Vite, soit en développement :

npm run dev

Soit en production :

npm run build

Cet article ne constitue qu’une introduction, vous pouvez trouver la documentation complète ici.

Print Friendly, PDF & Email

3 commentaires

Laisser un commentaire