|

Vite - next gen build tool

ausgesprochen /vit/

Was ist das Ziel?

Vite will vor Allem für eine bessere Developer Experience sorgen. Dies wird durch Geschwindigkeit und möglichst wenig Config erreicht.

Geschwindigkeit - Was macht vite anders?

Vite kombiniert zwei verschiedene Build Tools. Der Code wird dabei in Abhängigkeiten (Vendor Code) und Source Code (Custom Code) unterteilt. Die Idee dabei ist, dass sich die Abhängigkeiten selten ändern und der Source Code oft. Vite führt ein pre-bundling der Abhängigkeiten aus. Dabei werden alle Module in ESM umgewandelt und Bibliotheken, die aus vielen Modulen bestehen, in ein einzelnes Module zusammengefasst. Dieses pre-bundling wird mit esbuild ausgeführt. Esbuild ist in go geschrieben und um ein vielfaches schneller als JS basierte Bundler.

©️ esbuild

Der Source Code wird von vite als native ESM ausgeliefert. Somit wird das Bundling an den Browser ausgelagert.

Da vite den Code nicht bundled sondern als ESM bereit stellt, ist der dev Server sehr schnell bereit. Bei dem traditionellen Bundle basiertem dev Server müssen erst alle Bundles kompiliert werden bevor der dev Server bereit ist:

bundle based
©️ vitejs

Im Gegensatz dazu ist ein ESM basierter dev Server sofort bereit und der Browser lädt die Module, die er benötigt.

esm based
©️ vitejs

Bei Änderungen am Code entfällt das wiederholte Erstellen von Bundles. Geänderte Modules werden blitzschnell ausgetauscht. Diese Vorteile machen das lokale Arbeiten sehr angenehm.

Wenig Config

Als Entwickler will man coole Apps bauen und sich nicht mit hunderten Zeilen Config rumschlagen. Vite löst dieses Problem indem es eine cli bereitstellt. Mit dieser lassen sich sehr einfach Projekte mit verschieden Anforderungen erstellen. Vite unterstützt dabei zum Beispiel Vue, React, Vanilla JS und Typescript. Vite bringt dabei viele Presets und Optimierungen von Haus aus mit. SCSS, JSX etc. funktionieren einfach. Es müssen keine Loader o.Ä. definiert werden. Wenn eine PostCSS Config vorhanden ist, wird PostCSS automatisch auf die Stylesheets angewandt - It just works!

Wenig Config kann natürlich den Nachteil haben, dass spezielle Anpassungen erschwert werden. Vite stellt jedoch eine Plugin Api bereit mit der sich das Verhalten beeinflussen lässt. Für die Behandlung des Source Codes, sowie der Erstellung von Production Bundles nutzt Vite übrigens Rollup. Somit hat man Zugriff auf eine Vielzahl von Rollup Plugins. Grund dafür ist, dass Esbuild noch nicht alle nötigen Funktionen mitbringt.

Mehr zu lesen gibt es auf vitejs.dev