Das JavaScript-Framework Vue.js, Teil 14 Flotte Webentwicklung mit Vite

Anbieter zum Thema

Hyland Software Germany GmbH

Mendix GmbH

Flexera Software GmbH

Für Vue.js, das Prototyping und Rapid Development zelebriert, sind lange Build-Zeiten unhaltbar. Das Tool Vite soll als Development-Server und Build Tool den Build-Prozess gegenüber anderen Lösungen deutlich beschleunigen.

Wer in der Vergangenheit Vue-Anwendungen mit dem Vue CLI erstellte, nutzte unter der Haube automatisch Webpack. Webpack ist ein JavaScript-Bundler, der die zahlreichen für die Anwendung erforderlichen (JavaScript-, Bild-, CSS-) Dateien analysiert und daraus Module erstellt. Diese wenigen Module werden dann an den Browser ausgeliefert, wodurch die Geschwindigkeit zur Laufzeit erhöht wird.

Der Haken dabei: Das Auflösen der Abhängigkeiten mit all den Importen und Exporten ist ein komplexer Vorgang, der einige Zeit erfordert. Für einen gelegentlichen Produktionsbuild ist das verschmerzbar, aber während der Entwicklung mit dem DevServer (der ebenfalls Webpack einsetzt) ist eine kleine Änderung am Code bei großen Anwendungen erst nach einiger Zeit im Browser sichtbar.

Deshalb entschloss sich Evan You – der Entwickler hinter Vue.js – ein schnelleres Build-Tool für die Frontend-Webentwicklung (nicht nur für Vue.js!) zu programmieren. Diese Alternative, inzwischen in Version 2 verfügbar, heißt Vite und der (französische) Name verspricht nicht zu viel.

Vite ist dramatisch schneller, je nach Größe der Anwendung um den Faktor 10 bis 100. Diese Performanceverbesserung wird unter anderem durch Nutzung der noch nicht allzu lange verfügbaren nativen ES-Script-Module des Browsers, der Unterteilung des Projektcodes in pre-gebundelte Dependencies und dem eigentlichen Quellcode sowie einem neuen DevServer mit schnellem Hot Module Replacement (HMR) erreicht.

Letzteres ermöglicht dem Browser, geänderte Teile einer Seite neu zu laden, ohne dabei den Zustand zu verlieren. Da Vite neben den Performanceverbesserungen zudem noch tolle Features wie etwa eine Out-of-the-Box TypeScript-Unterstützung bietet, ist es auf jeden Fall eine interessante Alternative zum altgedienten Vue CLI und lohnt einen Blick.

Anlegen eines Projekts mit Vite

Voraussetzung für Vite ist Node.js, mindestens in der Version 12.2.0. Mit dem Kommando node –version kann man die aktuell installierte Version anzeigen und gegebenenfalls auf den neuesten Stand bringen. Das Anlegen eines Projekts mit Vite erfolgt – bei Verwendung von npm als Paketmanager – mit dem folgenden Befehl:

Die erforderlichen Pakete werden installiert und anschließend in einem Assistenten Projektname, Framework (Vanilla, Vue.js, React, Preact, Lit oder Svelte) sowie das Template abgefragt. Alternativ lassen sich Projektname und Template auch gleich beim Anlegen übergeben:

Für ein TypeScript-Projekt lautet der Name des Templates vue-ts statt vue. Danach lässt sich mit cd in den neu angelegten Projektordner wechseln. Die Struktur ähnelt naturgemäß Projekten, die mit dem CLI angelegt wurden:

Ein Blick in package.json offenbart jedoch die Vite-Aufrufe unter Scripts sowie die Abhängigkeiten zu Vite und dem für die Vue-Entwicklung erforderlichen Plug-in in den DevDependencies:

Nach dem Installieren der erforderlichen Abhängigkeiten (mit npm install) kann das Projekt bereits mit npm run dev im Vite-DevServer gestartet werden. Das geschieht atemberaubend schnell und die Anwendung lässt sich danach unter der URL http://localhost:3000 im Browser öffnen. Der Screenshot zeigt den Welcome-Screen.

Wie im Welcome-Screen empfohlen, kann man nun testweise eine Datei wie HelloWorld.vue ändern, um das Hot Module Replacement bei der Arbeit zu sehen. Während des Tippens zum Beispiel einer Textänderung wird die Seite im Browser automatisch im Browser aktualisiert, ein Speichern der Datei oder ein Browser-Refresh ist nicht erforderlich. Da hier kein neues Bundle gebaut, sondern nur das upgedatete Modul zum Browser übertragen wird, geht auch das unglaublich flott.

Der Ärger mit der Performance des Vue-CLI-DevServers tritt erst bei größeren Vue-Projekten auf, dann aber massiv. Vite stellt eine moderne und schnelle Alternative zur Verfügung, die man, einmal daran gewöhnt, nicht mehr missen möchte. Auf der GitHub-Seite des Projekts finden sich neben der Dokumentation Links zu zahlreichen Templates und Plugins, beispielsweise für Electron oder React.

(ID:48498897)