Vue CLI ist eine Kommandozeilenschnittstelle (CLI), die das Erstellen und Verwalten von Vue.js-Projekten vereinfacht. Wenn Sie mit Vue.js entwickelt haben, ist Vue CLI wahrscheinlich das Build-Tool Ihrer Wahl, da es lange Zeit als Standard angesehen wurde.
Es bietet unter anderem eine Reihe von Templates und unterstützt die Integration häufig verwendeter Bibliotheken wie Vue Router und verschiedener Testframeworks. Darüber hinaus stellt Vue CLI eine hervorragende Abstraktionsschicht über den Build-Tools Webpack und Babel zur Verfügung.
Datenbereitstellung auf Anfrage
Der Flaschenhals klassischer Bundler
Da Webpack ein Bundle-basiertes Build-Tool ist, muss es die gesamte JavaScript-Datei crawlen, verarbeiten und konkatenieren, um Ihre Anwendung bereitzustellen. Dies gilt sowohl für Ihren Anwendungscode als auch für die Abhängigkeiten.
Webpack crawlt den gesamten Quellcode und alle Abhängigkeiten, bevor der Entwicklungsserver gestartet wird.
Bei jeder Änderung einer Datei wird das gesamte JavaScript-Bundle von Webpack neu kompiliert. Daher kann es selbst bei aktiviertem HMR (Hot Module Replacement) mehrere Sekunden (je nach Größe des Projektes) dauern, bis Änderungen im Browser angezeigt werden. Die Arbeit an großen JavaScript-Anwendungen führt aufgrund der verzögerten Feedback-Schleife zu einer schlechten Benutzbarkeit für Entwickler.
Vite’s neuer Ansatz
In diesem Bereich ist im Jahr 2021 ein neues Tool aufgetaucht, das eine Alternative zu Vue CLI/Webpack bietet. Vite (französisch für „schnell“) wurde von Evan You, dem Entwickler von Vue, entwickelt, um einen vollständigen Framework-unabhängigen Bundler mit bis zu 10-100x schnelleren Kompilierzeiten und einer erstaunlichen Benutzerfreundlichkeit mit eingebautem HMR in nahezu Echtzeit zu bieten. Dies wird durch die Verwendung der browser-nativen ESM (Ecma Script Modules)-Unterstützung ermöglicht, ähnlich wie bei snowpack und preact/wmr.
Webpack crawlt den gesamten Quellcode und alle Abhängigkeiten, bevor der Entwicklungsserver gestartet wird.
Wenn Ihr Browser die /home-Route anfordert, verarbeitet Vite nur die für die Route erforderlichen Module.
Während ein Bundler-basierter Workflow wie Webpack alle JavaScript-Module vor einer einzelnen Browser-Anfrage verarbeiten muss, verarbeitet Vite feingranular nur die tatsächlich benötigten Module. Dazu werden die Module Ihrer Anwendung in Abhängigkeiten und Quellcode getrennt.
- Abhängigkeiten ändern sich nicht häufig, daher werden sie mit esbuild (einem in Go geschriebenen JavaScript-Bundler) “vorgebündelt”; dies geschieht nur einmal, es sei denn, die Abhängigkeiten ändern sich.
- Der Quellcode, der sich während der Arbeit mehrfach verändert, wird in browser-native ESMs umgewandelt, wobei nur die für die aktuelle Seite benötigten Dateien vom Browser geladen werden.
Der neue Standard für Vue
Ihre bestehenden Projekte werden selbstverständlich weiterhin mit dem auf Webpack basierenden Vue CLI funktionieren. Allerdings befindet sich diese nun im Wartungsmodus, d.h. die Weiterentwicklung wurde bis auf kritische Bugfixes eingestellt. Die Vue.js-Dokumentation empfiehlt nun auch die Verwendung von Vite für die Erstellung neuer Projekte.
Die Migration von Vue CLI zu Vite
Die folgende Schritt-für-Schritt-Anleitung beschreibt die Migration eines Standard-Vue.js-Projekts, das mit Vue CLI erstellt wurde, nach Vite. Die Mindestvoraussetzungen für die Verwendung von Vite sind Node <=14.18 sowie Vue 2 (ab Version 2.7 über das offizielle Plugin).
1. Abhängigkeiten (package.json)
Der erste Schritt zur Migration auf Vite ist die Aktualisierung der Abhängigkeiten in package.json. Hier müssen alle Vue CLI Abhängigkeiten entfernt werden.
- Wir können auch den “sass-loader” entfernen, da Vite bereits eine integrierte Unterstützung für die gängigsten Präprozessoren bietet.
- Wir können nun auch den “Vue-Template-Compiler” entfernen, da dies von den Vite-Vue-Plugins übernommen wird, welche wir im nächsten Schritt hinzufügen.
- Als letztes fügen wir Vite als Abhängigkeit hinzu, sowie die Vue Plugin Komponente für Vite, um Vue Single File Components zu unterstützen.
Wenn Sie ein Vue 2 Projekt migrieren, müssen Sie zusätzlich zum offiziellen Vue Plugin auch das Vite Plugin für Vue 2 integrieren.
2. Nur moderne Browser unterstützen
Da Vite ein Build-Tool der nächsten Generation ist, gehen wir optimistisch vor und unterstützen nur moderne Browser (die ES6 unterstützen). Dadurch bleiben unsere Builds so schlank und schnell wie möglich. Welche Browser das genau sind, kann hier nachgelesen werden. Dies entspricht mehr als 97 Prozent der weltweiten Nutzer (Stand Februar 2023).
In der Praxis bedeutet dies, dass wir Babel vollständig aus unseren Abhängigkeiten entfernen können, da die meisten mobilen und Desktop-Browser fast vollständige Unterstützung für alle ES6-Funktionen bieten. Wenn Sie noch ältere Browser wie Internet Explorer 11 unterstützen müssen, bietet Vite ein offizielles Plugin dafür an.
- Um Babel zu entfernen, löschen wir also zunächst die Datei “babel.config.js”.
Da wir bereits die @vue/cli-plugin-babel-Abhängigkeit entfernt haben, die Babel selbst benötigt, müssen wir nur noch ein paar andere babel-bezogene Abhängigkeiten aus json entfernen. - Da babel-eslint nun entfernt ist, müssen wir es als Parser aus unserer .eslintrc Datei entfernen.
- Schließlich müssen wir die “env” von node auf es2021 aktualisieren, da wir zukünftig nur moderne Evergreen-Browser unterstützen.
Diese Änderung wird uns auch dazu zwingen, eslint selbst sowie das eslint-plugin-vue zu aktualisieren, um die es2021-Umgebung zu unterstützen.
3. Vite Konfiguration
In diesem Schritt konfigurieren wir Vite für unser Vue.js-Projekt. Vite wird über eine vite.config.js-Datei im Hauptverzeichnis des Projekts konfiguriert. So sieht die Standard vite.config.js-Datei aus, wenn man ein neues Vite Projekt für Vue mit “npm init vite@latest” initialisiert.
(Bei Vue 2 muss hier “vite-plugin-vue2” importiert werden.)
Damit der Webpack @ import alias so funktioniert wie bei Vue CLI, müssen wir diesen hinzufügen.
Die vue.config.js-Datei im Stammverzeichnis kann gelöscht werden.
4. Anpassung der index.html
Im Gegensatz zum Vue CLI erwartet Vite die index.html-Datei im Stammverzeichnis des Projekts, statt im /public Verzeichnis, und muss somit verschoben werden. Auch innerhalb der index.html-Datei müssen Sie ein paar Änderungen vornehmen.
Zunächst ändern wir die Instanzen des Platzhalters <%= htmlWebpackPlugin.options.title %> in fest kodierte Werte.
Wir müssen auch den Platzhalter <%= BASE_URL %> durch einen absoluten Pfad ersetzen. (Das /public Verzeichnis muss hier nicht angegeben werden!)
Der letzte und wichtigste Punkt ist, dass die JavaScript-Anwendung nicht mehr automatisch injiziert wird, so dass wir sie wie folgt einfügen müssen.
5. Skripte
Zurück in der package.json, in der wir die Skripte aktualisieren müssen.
- Die vue-cli-Befehle werden durch Vite spezifische ersetzt. Beachten Sie, dass der Befehl zum Hochfahren des Entwicklungs-Servers nicht mehr “serve” heißt. Vite verwendet stattdessen “dev”, und “serve” wird für die lokale Vorschau des Produktions-Builds verwendet.
- Wenn Sie Linting aktiviert haben, sollten Sie auch das Lint-Skript aktualisieren, um eslint direkt auszuführen.
6. Umgebungsvariablen
Es gibt viele Überschneidungen zwischen der Art und Weise, wie Umgebungsvariablen in Vite und wie sie in Vue CLI funktionieren. Zum Beispiel kann die .env Namenskonvention gleich bleiben.
Sie können jedoch nicht mehr über die “process“ Variable auf Umgebungsvariablen zugreifen. Stattdessen sind sie unter “import.meta.env” zu finden. Infolgedessen müssen alle Vorkommnisse im gesamten Projekt ersetzt werden.
Außerdem wurde der Präfix der Umgebungsvariablen von “VUE_APP_” in “VITE_” geändert, welche ebenso aktualisiert werden müssen.
7. Single File Component (SFC) imports
Je nach Alter des mit Vue CLI erstellten Projekts müssen die Importe von Vue Komponenten angepasst werden. Sie müssen also sicherstellen, dass alle Importe von SFCs den Suffix .vue beinhalten.
Neuere Versionen der Vue CLI haben dies bereits implementiert. Eventuell ist in Ihrem Projekt dieser Schritt damit bereits erledigt.
8. Webpack Kommentare
Schließlich können Sie alle Webpack spezifischen Kommentare für die Benennung Ihrer dynamischen Importe entfernen.
Stattdessen benennt Vite Ihren Chunk automatisch anhand des ursprünglichen .vue Dateinamens in Kombination mit einem Hash.
9. Optional: Meinungsbehaftete Standards
Jedes Framework kommt mit einer Reihe von Standards. Mit einer Migration wechseln Sie daher von den Meinungen von Webpack zu denen von Vite.
- Vite nutzt (seit 3.0) standardmäßig den Port 5173, Webpack hingegen 8080. Es könnte sich als sinnvoll erweisen, Ihren bevorzugten Port in der config.js anzugeben. Details zu allen Konfigurationsmöglichkeiten finden Sie hier.
- Falls Sie Freund von “pre-commit hooks” sind und diese via Vue CLI verwendet haben, werden Sie feststellen, dass diese nach der Migration nicht mehr funktionieren. Das liegt daran, dass “yorkie” (ein Fork von dem bekannten Tool “husky”) in die Vue CLI integriert ist. Falls Sie diese Funktionalität weiterhin verwenden möchten, können Sie “yorkie” einfach zum Projekt hinzufügen.
Die Migration eines Standard Vue CLI Projektes zu Vite ist somit abgeschlossen. Mit dem Befehl „npm run dev” kann der lokale Entwicklungsserver gestartet werden.
Sie werden feststellen, dass Ihr Projekt nicht nur lokal schneller gebaut wird, sondern dass auch das Produktions-Bundle schlanker ist als zuvor und die Konfiguration durch den Wegfall von Babel und Webpack erheblich vereinfacht wurde.
Framework-agnostisch
Ein bemerkenswerter Aspekt von Vite, der viel zum bisherigen Erfolg beigetragen hat, ist die Tatsache, dass es nicht nur mit Vue kompatibel ist. So lassen sich inzwischen ebenfalls React, Preact, Svelte, Solid, Astro und Vanilla-JavaScript Projekte mit Vite erstellen.
Wenn Sie neugierig geworden sind, können Sie ein neues Vite-basiertes Projekt entweder im Browser mit Stackblitz oder lokal mit “npm create vite@latest” erstellen und sich selbst davon überzeugen.
Einschränkungen von Vite
Natürlich hat Vite auch einige nicht zu vernachlässigende Nachteile:
- Vite transpiliert lediglich die .ts-Dateien und führt keine Typüberprüfung durch. Es geht davon aus, dass die Typüberprüfung von Ihrer IDE und Ihrem Build-Prozess durchgeführt wird.
- Unterschiedliche Werkzeuge werden verwendet, um den Code zu bündeln; esbuild wird für den Entwicklungs-Build verwendet, während Rollup für den Produktions-Build verwendet wird. Dies kann zu Fehlern führen, die schwer zu debuggen und zu beheben sind.
- Vite ist relativ neu im Vergleich zu den etablierten Tools wie Webpack und hat demnach ein kleineres, wenn auch schnell wachsendes Angebot an Plug-ins.
Von Vue CLI zu Vite: Fazit
Insgesamt hängt es von Ihren spezifischen Anforderungen und Bedürfnissen ab, ob Vite für Ihr Vue.js-Projekt eine bessere Alternative zu Vue CLI ist oder nicht. Wenn die Anforderungen Ihres Projekts eine Migration erlauben, bietet Vite eine interessante Alternative für Entwickler, die schnellere Kompilierzeiten und eine verbesserte Benutzerfreundlichkeit suchen.
Wenn keine Migration angestrebt wird, gibt es andere Lösungen, um die Kompilierungszeit zu verkürzen, wie z.B. swc-loader oder esbuild-loader.
Für neue, moderne Projekte sollte Vue CLI jedoch zugunsten von Vite gemieden werden, da es sich bereits im Wartungsmodus befindet und es keine nennenswerten Alternativen gibt. Aus eigener Erfahrung kann ich sagen, dass es schwierig ist, zu Vue CLI-basierten Projekten zurückzukehren, wenn man sich einmal an Vite gewöhnt hat und da sowohl Vue als auch Vite von Evan You entwickelt wurden, steht einer langfristigen Unterstützung und einer erstklassigen Integration nichts im Wege.
Titelmotiv: Bild von Innova Labs auf Pixabay
- Eine Einführung in Nuxt: Vue auf Steroiden - 4. April 2024
- Von Vue CLI zu Vite: die Migration eines Vue-Projekts erfolgreich planen und umsetzen - 18. September 2023
