asset bündeling ist ein zentraler Bestandteil der modernen Webentwicklung, um CSS, JavaScript und andere Ressourcen zu optimieren und zu verwalten. Seit Jahren hat Laravel Mix diesen Prozess optimiert, aber als sich JavaScript -Tools entwickelt haben, ist Laravel als Standard in Laravel 11 auf Vite umgewandelt.

Warum hat Laravel diesen Wechsel gemacht?

.

---

Leistung und Geschwindigkeit

vite konzentriert sich auf zwei wichtigste Dinge: Entwicklungsgeschwindigkeit und Produktionsleistung. Wenn Sie es satt haben, auf Builds zu warten, fühlt sich das sofortige Feedback von Vite wie ein Hauch frischer Luft an. Mit Hot -Modul -Ersatz (HMR)

liefert der Entwicklungsserver von Vite Änderungen in Echtzeit, sodass Sie sofort Updates ohne Auffrischung von Seite sehen können. Dieses sofortige Feedback schafft eine schnellere und angenehmere Entwicklungserfahrung.

Laravel Mix verwendet diesen Ansatz und erfordert eine signifikante Bündelungszeit, was zu einer Verzögerung führt, bevor der Server fertig ist.

Dieser ESM-basierte Ansatz ist in der Entwicklung viel schneller, da er den vollständigen Bündelungsprozess vermeidet. Vite verwendet diesen Ansatz, sodass Entwickler Änderungen sofort sehen können, ohne auf ein volles Bündel zu warten.

(Die Bilder stammen aus der offiziellen Dokumentation von Vite)

Für Produktionsergebnisse verwendet Vite Rollup als Bundler, um Ihren Code zu optimieren und zu minimieren, um eine schnelle Leistung zu gewährleisten. Dies ermöglicht Vite, das Beste aus beiden Welten zu bieten: No-Bundle-Entwicklung für Geschwindigkeit während der Codierung und traditioneller Bündelung für optimierte Produktionsergebnisse.

Moderne JavaScript -Unterstützung

vite excels auch bei baum shaking und code spliting . Durch die Nutzung von rollup

erzeugt VITE optimierte Produktionsbündel, streift ungenutzten Code und spaltende Vermögenswerte nach Bedarf. Dies führt zu kleineren, schnelleren Ladebündeln, die die Leistung Ihrer App verbessern.

Verbesserte Entwicklererfahrung

Vite's Konfigurationsprozess ist erfrischend unkompliziert. Im Gegensatz zu WebPack, wo Konfigurationen dicht und komplex werden können, ist die Datei von Vite vite.config.js

leicht zu lesen und anzupassen, auch wenn Sie keine über umfassende Bundler -Erfahrung haben.

Außerdem ist Vite so erstellt, dass sie nahtlos mit beliebten Frameworks wie Vue und React zusammenarbeitet. Da diese Frameworks auch von der HMR von Vite und einer optimierten Entwicklungsumgebung profitieren, können Sie effizienter an Front-End-hochwertigen Laravel-Projekten arbeiten.

Zukunftssicherung und Einführung der Gemeinschaft

Das JavaScript -Ökosystem entwickelt sich schnell, und Vite hat einen soliden Halt gewonnen. Es wird weit verbreitet und unterstützt mit einer großen, aktiven Community, die fortlaufende Verbesserungen und eine reichhaltige Ressource von Plugins mit sich bringt. Das Design von Vite entspricht gut mit der Anleitung von Front-End-Entwicklung und macht es zu einer intelligenten Wahl, wenn Sie Ihr Projekt zukünftig haben möchten.

Laravels Entscheidung, Vite zu übernehmen, zeigt eine klare Ausrichtung mit modernen Standards und positioniert Ihre Laravel-Projekte, um mit den neuesten Front-End-Technologien kompatibel zu bleiben.

Laravel -Integration

Laravels vite Plugin

enthält praktische Helferfunktionen wie @vite für Blade -Vorlagen, automatisch um Asset -Versioning und Cache -Busting. Mit nur @Vite ('Ressourcen/CSS/app.css') können Sie Ihre CSS -Datei verknüpfen, ohne sich um veraltete Cache -Probleme zu kümmern.

So können Sie vite.config.js für ein Laravel Vue -Projekt einrichten:

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

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

import {definconfig} aus 'vite'; import Vue aus '@vitejs/plugin-vue'; Standard default DefinoConfig ({{ Plugins: [Vue ()], });

und dann in der Klinge:

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

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

@vite ('Ressourcen/CSS/app.css')

Hallo, vite!