Asset Bundling est une partie centrale du développement Web moderne, aidant à optimiser et à gérer CSS, JavaScript et d'autres ressources. Pendant des années, Laravel Mix a rationalisé ce processus, mais à mesure que les outils JavaScript ont évolué, Laravel est passé à Vite comme par défaut dans Laravel 11.

Alors pourquoi Laravel a-t-il fait ce changement?

Performance et vitesse

Vite se concentre sur deux choses principales: la vitesse de développement et les performances de production. Si vous en avez assez d'attendre des constructions, les commentaires instantanés de Vite ressembleront à une bouffée d'air frais. Avec Remplacement du module chaud (HMR) , le serveur de développement de Vite fournit des modifications en temps réel, vous pouvez donc voir des mises à jour instantanément, sans actualisation pleine page. Cette rétroaction immédiate crée une expérience de développement plus rapide et plus agréable.

Laravel Mix utilise cette approche, et elle nécessite un temps de regroupement initial important, ce qui entraîne un retard avant que le serveur ne soit prêt.

Cette approche basée sur l'ESM est beaucoup plus rapide dans le développement, car elle évite le processus de regroupement complet. VITE utilise cette approche, permettant aux développeurs de voir des changements instantanément sans attendre un bundle complet.

(Les images proviennent de la documentation officielle de Vite)

Pour les builds de production, Vite utilise Rollup comme bundler, optimisant et minimisant votre code pour garantir des performances rapides. Cela permet à Vite d'offrir le meilleur des deux mondes: le développement sans bouteille pour la vitesse pendant le codage et le regroupement traditionnel pour les versions de production optimisées.

Support JavaScript moderne

Vite excelle également à arborescence d'arborescence et division du code . En tirant parti de rollup , Vite produit des faisceaux de production optimisés, en supprimant le code inutilisé et en divisant les actifs au besoin. Il en résulte des groupes de chargement plus petits et plus rapides qui améliorent les performances de votre application.

Expérience améliorée des développeurs

vite.config.js est facile à lire et à personnaliser, même si vous n'avez pas d'expérience Bundler. .

Plugin Vite de Laravel inclut des fonctions d'assistance pratiques comme @vite pour les modèles de lame, gérant automatiquement le versioning d'actifs et l'éclatement du cache. Avec Just @Vite ('Resources / CSS / App.css'), vous pouvez lier votre fichier CSS sans vous soucier des problèmes de cache périmés.

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

export default defineConfig({
  plugins: [vue()],
});

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

export default defineConfig({
  plugins: [vue()],
});