Vite ist ein Bauwerkzeug für Frontend-Projekte. Im Entwicklungsbetrieb liefert es die einzelnen Module aus, ohne sie vorher zusammenzufassen; für die Auslieferung bündelt es das Projekt in wenige Dateien. Der Name ist französisch und heißt schnell.
- Vite
Das Bauwerkzeug, das Frontend-Projekte im Entwicklungsbetrieb ohne Bündeln ausliefert.
Beispiel: „Mit Vite startet der Entwicklungsserver in unter einer Sekunde, auch bei tausend Modulen.“Entstanden 2020 im Umfeld von Vue, heute unabhängig vom Framework und in Laravel seit Version 9 das voreingestellte Bauwerkzeug.
Abgrenzung zum Bundler: Vite ist beides. Im Entwicklungsbetrieb bündelt es nichts, für die Auslieferung schon.
Was Vite anders macht als ältere Bauwerkzeuge
Es nutzt aus, dass heutige Browser Module von sich aus laden können. Beim Start muss deshalb nichts zusammengebaut werden, und der Server ist sofort da. Geändert wird eine Datei, tauscht Vite genau diese eine im Browser aus, ohne die Seite neu zu laden.
Der Unterschied wächst mit dem Projekt. Ein Werkzeug, das vor jedem Start alles bündelt, braucht bei tausend Modulen Minuten; bei Vite bleibt die Startzeit nahezu gleich, weil die Arbeit erst anfällt, wenn eine Datei wirklich angefragt wird.
Was Vite beim Ausliefern tut
Dort bündelt es doch, weil hundert einzelne Anfragen über das Netz teurer wären als eine große. Dafür laufen zwei Werkzeuge unter der Haube: esbuild für die Übersetzung und Rollup für das Zusammenfassen. Das Ergebnis landet samt Prüfsummen im Dateinamen in einem Ausgabeverzeichnis.
Zu jedem Bau gehört eine Manifestdatei, über die die Anwendung die richtigen Dateinamen findet. Fehlt sie, bricht die Seite mit einem Hinweis auf das fehlende Manifest ab.
Woran man sich mit Vite verrennt
Am Unterschied zwischen Entwicklungsbetrieb und gebautem Stand. Läuft der Entwicklungsserver, zieht die Seite ihre Dateien von dort; läuft er nicht, nimmt sie den letzten Bau aus dem Ausgabeverzeichnis. Liegt dort ein alter Stand, sieht man Änderungen schlicht nicht, und zwar ohne Fehlermeldung.
In unseren Projekten ist das der häufigste Fall von „bei mir sieht es anders aus“: Das Ausgabeverzeichnis steht meist nicht in der Versionsverwaltung, und ein alter Stand darin bricht Layouts lautlos. Wer eine Änderung nicht sieht, prüft deshalb zuerst, ob der Entwicklungsserver läuft.