Seite 4: Bedeutung für die JavaScript-Welt

Inhaltsverzeichnis

Gerade durch die vorgenommenen Änderungen in Vite 2 könnte das Tool ein echter Zugewinn für die JavaScript-Welt werden. Schon jetzt, wenige Wochen nach dem ersten Beta-Release, sprießen regelmäßig neue, durch die Community getriebene Plug-ins und Projekte hervor. Neben einer Vite-Integration für Ruby-on-Rails-Projekte gibt es weniger exotische Kontributionen in Form diverser Starter-Templates, Beispielprojekte oder kleinerer Utility-Plug-ins wie der automatischen Bildkomprimierung. Das Wachstum zeigt das Stimmungsbild der Community, die auch in den sozialen Medien positiv antwortet. Angetrieben von der beabsichtigten Framework-Unabhängigkeit wagen sich auch React- und Svelte-Entwickler an Vite. Das zeigen nicht nur einige Issues im GitHub-Repository, sondern auch die Welle an Tutorials und How-tos, die zurzeit das Netz fluten (zum Beispiel auf der Online-Publishing-Plattform Medium).

Nächstes Ziel in Sicht

Der nächste Meilenstein für Vite ist die finale Unterstützung für serverseitiges Rendern. Nach dem initialen Hype um Frontend-Frameworks wie React oder Vue ist die wachsende Popularität des serverseitigen Renderings ein Schritt in Richtung performanterer JavaScript-Webseiten. Gerade clientseitige Frameworks belasten die initiale Ladezeit stark, was unter anderem zu schlechteren Platzierungen in Suchmaschinen führt.

Ende Januar veröffentlichte You mit der Beta 50 eine erste offizielle Implementierung des Features. Zwar existieren aus der Community heraus schon einige Beispiele für serverseitiges Rendern mit Vite, allerdings strebt You eine integrierte Lösung an, die durch geschickten Einsatz der bestehenden Architektur und Funktionen seinem Kernanliegen – der Geschwindigkeit – treu bleiben soll. Die derzeitige Implementierung ist zwar noch experimentell, sodass die offizielle Dokumentation um Vorsicht bittet und auf mögliche Änderungen hinweist. Allerdings gibt es schon vollfunktionale Beispielprojekte auf der Basis von Vue 3 oder von React.

Die Nichttrivialität des Themas macht es zur häufigen Herausforderung, sodass Vite hier das Potenzial hat, eine echte Erleichterung zu werden. Der gesamte Feature-Umfang zielt allerdings nicht bloß auf Komfort und Vereinfachung ab, sondern ermöglicht zusätzlich Anwendungen, die unter webpack so nicht möglich wären. Mit VitePress zeigt das Team beispielsweise eindrucksvoll, wie man Vites "PS" auf die Straße bringt und liefert Ideen für die Einsatzmöglichkeiten des Tools.

VuePress und VitePress

Im Jahr 2018 hat das Vue-Team die erste stabile Version von VuePress veröffentlicht. Dieses Tool ist eine Kombination aus statischem Seitengenerator (SSG) und Single-Page Application (SPA). Für die Praxis bedeutet das, dass der Build-Prozess alle mit Inhalt gefüllten Seiten in statische HTML-Dateien übersetzt, die dann beim ersten Aufruf mit dem Browser die JavaScript-Logik laden und die Webseite in eine gewöhnliche Single-Page Application verwandeln. Diese basiert dann dem Namen entsprechend auf Vue.js 2, sodass das Tool besonders in der Vue-Community für Blogs oder technische Dokumentationen beliebt ist. Die Hauptvorteile einer solchen zweifaltigen Architektur sind eine bessere Suchmaschinenoptimierung und eine schnelle initiale Ladezeit, ähnlich dem serverseitigen Rendern. Durch den Einsatz der SPA gewinnt man zusätzlich deren Vorteile, nämlich responsive Navigation und die Möglichkeit dynamischer Komponenten.

Da VuePress allerdings ebenfalls auf webpack basiert, plagen es auch die vorgenannten Probleme wie langsames Hot Module Replacement und ein träger Development-Server. Somit erschien es für das Vue-Team wohl naheliegend, mit VitePress eine VuePress-Schwester auf Vite-Basis zu schaffen (s. Abb. 2). Durch die parallele Entwicklung beider Projekte lassen sich Probleme oder fehlende Features, die bei VitePress auffallen, unbürokratisch in Vite verankern, um für zahlreiche weitere Projekte einen Mehrwert zu bieten.

Die Summe der fundamentalen Unterschiede von Vue- und VitePress ist gering: Aus der Version 2 von Vue wird Version 3, Vite ersetzt den webpack-Unterbau, und ein größerer Fokus liegt auf der Performance. Hierdurch werden zusätzliche Verbesserungen möglich wie das Vermeiden des sogenannten "Double Payload".

Double Payload adé

Das Problem von statisch generierten Seiten mit Single-Page-Application-Funktionalität ist, dass Inhalte, die Nutzer bereits in der statischen HTML-Datei geladen haben, oft durch JavaScript erneut geladen werden. So kommen beim Versand zwischen Server und Nutzer deutlich größere Datenmengen zusammen, was gerade bei schlechter Netzwerkverbindung relevant ist. VitePress bedient sich zur Vermeidung dieses Double Payload eines Features von Vue 3: Statische Elemente kann der Vue-3-Compiler hosten. Das heißt, diese Elemente werden aus der Render-Funktion in Variablen ausgelagert und somit nur einmal erstellt – egal, wie oft die Seite oder Komponente zu rendern ist.

VitePress erkennt im Kompilat die gehosteten Elemente und löscht sie. Es rührt beim Initialisieren der SPA-Funktion im Frontend nur jene Elemente an, die von der Änderung unmittelbar betroffen sind. Der gesamte statische Inhalt, der nicht dynamisch änderbar ist, bleibt unverändert. Hiermit löst VitePress das Problem des Double Payload und erzielt so meistens Dateigrößen von wenigen Kilobyte – die Ladezeit ist somit sehr kurz. Besonders durch die Aufmerksamkeit, die es den vermeintlich kleinen Problemen widmet, könnte VitePress in der Summe deutlich an Fahrt gewinnen und sich von der Konkurrenz abheben.