Vor- und Nachteile von Vite und Vue CLI

Es gibt im Vue-Ökosystem ein neues Build-Tool namens Vite, das über einen Entwicklungsserver verfügt, der 10-100 Mal schneller ist als die Vue CLI.

Bedeutet das, dass Vue CLI veraltet ist? In diesem Artikel vergleiche ich die beiden Build-Tools und erkläre ihre Vor- und Nachteile, damit Sie entscheiden können, welches für Ihr nächstes Projekt das Richtige ist.

Vue CLI-Übersicht

Die meisten Vue-Entwickler wissen, dass Vue CLI ein unverzichtbares Tool für die schnelle Einrichtung Vue-basierter Projekte mit Standard-Build-Tools und Best-Practice-Konfigurationen ist.

Zu seinen Hauptfunktionen gehören:

• Technisches Gerüst
• Entwicklungsserver mit Hot Module Reloading
• Plugin-System
• Benutzeroberfläche
  

Für die Zwecke dieser Diskussion ist es wichtig zu beachten, dass Vue CLI auf Webpack aufbaut, sodass die Funktionalität und Leistung des Entwicklungsservers sowie des Builds eine Obermenge von Webpack darstellen.

Überblick zu Vite

Ähnlich wie Vue CLI ist auch Vite ein Build-Tool, das ein grundlegendes Projekt-Scaffolding und einen Entwicklungsserver bereitstellt.

Vite basiert jedoch nicht auf Webpack, sondern verfügt über einen eigenen Entwicklungsserver, der native ES-Module im Browser nutzt. Diese Architektur macht Vite um Größenordnungen schneller als den Entwicklungsserver von Webpack. Vite basiert auf Rollup und ist außerdem schneller.

Vite befindet sich noch in der Testphase. Es scheint, dass der Zweck des Vite-Projekts nicht darin besteht, ein All-in-One-Tool wie Vue CLI zu sein, sondern sich auf die Bereitstellung eines schnellen Entwicklungsservers und grundlegender Build-Tools zu konzentrieren.

Warum ist Vite so schnell?

Der Vite-Entwicklungsserver ist mindestens zehnmal schneller als Webpack. Bei einem Basisprojekt beträgt der Unterschied in der Entwicklungs-/Neuaufbauzeit 250 ms gegenüber 2,5 Sekunden.

In einem größeren Projekt wird dieser Unterschied deutlicher. Der Webpack-Entwicklungsserver kann beim Erstellen/Neuaufbau bis zu 25–30 Sekunden langsam sein, manchmal sogar noch langsamer. Gleichzeitig kann es sein, dass der Vite-Entwicklungsserver dasselbe Projekt mit konstanten 250 ms ausführt.

Dies stellt eindeutig einen bahnbrechenden Unterschied in der Entwicklungserfahrung dar. Wie macht Vite dies?

Webpack-Entwicklungsserverarchitektur

Die Funktionsweise von Webpack besteht darin, dass es Ihre gesamte Anwendung in ein JavaScript-basiertes Paket einbaut, indem es jeden Import und jede Anforderung in Ihrer Anwendung analysiert und Dateien (z. B. Sass, TypeScript, SFC) zur Laufzeit transformiert.

Dies alles geschieht auf der Serverseite und es besteht eine ungefähr lineare Beziehung zwischen der Anzahl der Abhängigkeiten und der Zeit zum Erstellen/Neuaufbau nach einer Änderung.

Architektur des Vite-Entwicklungsservers

Vite bündelt keinen Anwendungsserver. Stattdessen basiert es auf der nativen Unterstützung des Browsers für JavaScript-Module (auch bekannt als ES-Module, eine relativ neue Funktion).

Der Browser fordert bei Bedarf alle JS-Module über HTTP an und verarbeitet sie zur Laufzeit. Der Vite-Entwicklungsserver konvertiert bei Bedarf alle Dateien (wie Sass, TypeScript, SFC).

Diese Architektur vermeidet die Bündelung der gesamten Anwendung auf der Serverseite und nutzt die effiziente Modulverwaltung des Browsers, um einen deutlich schnelleren Entwicklungsserver bereitzustellen.

Tipp: Vite ist schneller, wenn Sie den Code Ihrer Anwendung aufteilen und einen Tree-Shake durchführen, da es auch während der Entwicklung nur die Module lädt, die es benötigt. Dies unterscheidet sich von Webpack, wo die Codeaufteilung nur Produktionspaketen zugute kommt.

Nachteile von Vite

Wie Sie vielleicht schon herausgefunden haben, ist das Hauptmerkmal von Vite sein unglaublich schneller Entwicklungsserver.

Ohne diese Funktion würde es wahrscheinlich nicht mehr diskutiert werden, da es im Vergleich zu Vue CLI wirklich keine zusätzlichen Funktionen bietet und einige Nachteile aufweist.

Da Vite JavaScript-Module verwendet, ist es am besten, wenn Abhängigkeiten ebenfalls JavaScript-Module verwenden. Während die meisten modernen JS-Pakete dies bieten, stellen einige ältere Pakete möglicherweise nur CommonJS-Module bereit.

Vite kann CommonJS in JavaScript-Module konvertieren, in manchen Randfällen ist dies jedoch möglicherweise nicht möglich. Natürlich ist auch ein Browser erforderlich, der JavaScript-Module unterstützt.

Im Gegensatz zu Webpack/Vue CLI kann Vite keine Pakete erstellen, die auf ältere Browser, Webkomponenten usw. abzielen.

Außerdem handelt es sich im Gegensatz zu Vue CLI beim Entwicklungsserver und den Build-Tools um unterschiedliche Systeme, was zu potenziell inkonsistentem Verhalten zwischen Produktion und Entwicklung führen kann.

Vue CLI vs. Vite – Zusammenfassung

Die Zukunft von Vite

Während sich der obige Vergleich auf den aktuellen Status von Vite und Vue CLI konzentriert, gibt es dennoch einige Punkte zu beachten:

• Vite wird sich nur verbessern, wenn die Unterstützung von JavaScript-Modulen in Browsern verbessert wird.
• Da das JS-Ökosystem immer weiter aufholt, werden mehr Pakete JavaScript-Module unterstützen, wodurch die Zahl der Randfälle, die Vite nicht verarbeiten kann, reduziert wird.
• Vite befindet sich noch in der Betaphase – die Funktionalität kann sich ändern.
• Es ist möglich, dass Vue CLI irgendwann in Vite integriert wird, sodass Sie keines von beiden mehr verwenden müssen.
  

Es ist erwähnenswert, dass Vite nicht das einzige Entwicklungsserverprojekt ist, das die Vorteile von JavaScript-Modulen im Browser nutzt. Es gibt auch das bekanntere Snowpack, das möglicherweise sogar die Entwicklung von Vite verdrängt. Die Zeit wird es zeigen

Oben finden Sie ausführliche Informationen zu den Vor- und Nachteilen von Vite und Vue CLI. Weitere Informationen zu Vite und Vue CLI finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!