Hallo Vite: Sich in Vite reinknien

Letztes Jahr habe ich mich mit einigen Themen beschäftigt, die den Fokus auf die Leistungssteigerung der Javascript-Entwicklung gelegt haben. Um genau zu sein, habe ich eine Menge getan: Ich habe über Storybook gesprochen, ich habe Rusty-Tools vorgestellt, ich habe einen Vergleich zwischen Next.js 11 und 12 durchgeführt und ich war sehr begeistert von React 18 und Turbopack.

Dieses Jahr setze ich diesen Trend fort, werde jedoch einen Blick auf Themen werfen, die etwas weiter weg von der bequemen React-Nische liegen. Das Erste, was ich mir ansehen wollte, war Vite.

Ich war anfangs nicht begeistert von Vite, ich meine, ich war begeistert von der Idee eines schnelleren Dev-Servers, aber ich war kein Fan von Vue. Sebastian hingegen war sehr begeistert davon, und er hatte recht, Vite ist großartig.

Vite ist ein Build-Tool, das ES-Module verwendet. um superschnelle Ausführung zu ermöglich. Es nutzt viele der schicken neuen JS-Features, die Browser jetzt unterstützen, was es schneller und weniger kompliziert als Webpack macht. Vite ist auch, was noch wichtiger ist, nicht auf Vue beschränkt, sondern kann mit React, Svelte, Angular und mehr verwendet werden.

Also lasst uns einen genaueren Blick darauf werfen.

Was ist Vite?

Vite ist ein Build-Tool, das darauf abzielt, eine schnellere und schlankere Entwicklungserfahrung für moderne Webprojekte zu bieten. Es baut auf das javascript eigene ES-Modulsystem und nutzt die Unterstützung des Browsers für den Import von ungebündelten Modulen während der Entwicklung. Außerdem wird ein Entwicklungsserver mitgeliefert, der umfangreiche Funktionserweiterungen bietet, wie z. B. Hot-Replacement von Modulen, Pre-Bundling von Abhängigkeiten und produktionsoptimierte Builds.

Was heißt das?

Das sind eine Menge komplizierter Wörter, was heißt das also?

Das Bundler-Problem

Vite ist ein Build-Tool, aber es ist kein Bundler. Eine kleine Geschichtsstunde: Die meisten modernen Browser haben 2018 Unterstützung für ES-Module hinzugefügt. Leider kam es zu keiner weiten Verbreitung, weil sie von älteren Browsern wie dem Internet Explorer nicht unterstützt wurden. Das bedeutete, dass wir unseren Code bündeln mussten, um den kleinsten gemeinsamen Nenner zu unterstützen.

Vite warf einen Blick auf diese Absurdität und sagte sich: "Zur Hölle mit alten Browsern! Wenn wir nur moderne Browser unterstützen, dann brauchen wir unseren Code nicht zu bündeln. Wir können einfach den Browser nutzen, um unseren Code nicht nur zu laden, sondern auch schneller zu laden, als wir ihn bündeln können."

Das Dev-Server-Problem

Warum dauert das Aktualisieren des Browsers nach der einer Dateiänderung während der Entwicklung mit Webpack so lange? Webpack muss den Code bündeln und dann die Seite neu laden. Dieser Prozess ist bei kleinen Projekten ziemlich schnell, aber bei großen Projekten kann es eine Weile dauern.

Vite überspringt den Schritt des Bündelns und verwendet stattdessen die Unterstützung des Browsers für ES-Module zum Laden des Codes. Das Ergebnis ist, dass der Code schneller geladen und die Änderungen schneller in den Browser übernommen werden.

In manchen Fällen ist es sogar zu schnell, manchmal war ich mir nicht einmal sicher, ob sich etwas geändert hat, aber das ist ein gutes Problem.

Gibt es Nachteile?

Nun, wie ich bereits gesagt habe, ist Vite nur für moderne Browser geeignet, wenn du also auch ältere Browser unterstützen musst, ist Vite nichts für dich. Vite verwendet außerdem unterschiedliche Tools für Entwicklung und Produktion, d.h. esbuild für Entwicklung und Rollup für Produktion. Das bedeutet, dass dein Code in der Entwicklung und im Live-Betrieb unterschiedlich kompiliert wird, was zu unerwartetem Verhalten oder in seltenen Fällen zu haarsträubenden Fehlern führen kann.

Ok, aber kann ich Vite mit X verwenden?

Ähnlich wie Webpack ist Vite erweiterbar und hat bereits eine beeindruckende Anzahl von Plugins.

• Willst du EsLint und StandardJS in deinem Projekt? Kein Problem, dafür gibt es Plugins.
• Möchten Sie TypeScript- und CSS-Module verwenden? Sie werden standardmäßig unterstützt.
• Möchten Sie Storybook und Sass verwenden? Auch dafür gibt es Plugins.
• Haben Sie einen Groll gegen Esbuild/Go und wollen ein nagelneues Rusty-Tool in Ihrem Leben? Vite + SWC ist kein Problem..

Es gibt so viele Sachen, die man mit Vite machen kann, und die Liste wächst täglich.

Fazit

Vite ist ein Build-Tool, das darauf abzielt, eine schnellere und schlankere Entwicklungserfahrung für moderne Webprojekte zu bieten. Es baut auf dem Javascript eigenem ES-Modulsystem auf und nutzt die Unterstützung des Browsers für den Import von ungebündelten Modulen während der Entwicklung. Darüber hinaus ist ein Entwicklungsserver enthalten, der im Vergleich zur nativen ES-Modulunterstützung im Browser umfangreiche Funktionserweiterungen bietet, z. B. Hot-Replacement von Modulen, Vorbündelung von Abhängigkeiten und produktionsoptimierte Builds.

Vite ist großartig, aber ist es der prophezeite Webpack-Killer, auf den wir alle gewartet haben? Wahrscheinlich nicht, ich persönlich denke, Turbopack hat diese Ehre. Aber ich sehe eine Zukunft, in der Vite mit Turbopack zusammenarbeitet, um eine bessere Entwicklungserfahrung zu bieten, und das ist eine Zukunft, auf die wir uns freuen können.

Es ist nett, einen ausführlichen Beitrag über Vite zu lesen, aber ich bin mir sicher, dass du es gerne in Aktion sehen würdest, oder? Wir haben einen Teapot Tech Talk, der den React Taschenrechner nachbaut, aber dieses Mal mit Vite.