Vite.js 3.0: Build-Tool für JavaScript wird rasanter

Vite.js, das Entwicklungs- und Build-Werkzeug von Vue.js-Erfinder Evan You, ist in Version 3.0 erschienen. Seit Version 2.0 von Februar 2021 gilt es als reif für die Produktion und hat seitdem stark an Popularität und Bedeutung hinzugewonnen. So verweist das Team um Evan You im Blogeintrag zu Vite 3 auf über eine Million Downloads – und zwar pro Woche. Mit Vite 3.0 läutet das Team einen festen Releasezyklus ein: Künftig soll mindestens einmal pro Jahr ein neues Major Release erscheinen.

Neue Ports sollen Kollisionen mit anderen Tools verhindern

Einige Änderungen in Vite 3 sind für die Arbeit mit dem Tool wichtig: Der standardmäßige Server-Port ist nun 5173 und der Vorschau-Server lauscht an Port 4173. Das soll Kollisionen mit anderen Tools vermeiden. Vite3 ändert sein Verbindungsschema so, dass es in den meisten Anwendungsfällen "out of the box", also ohne vorherigen Konfigurationsaufwand einsatzbereit sein sollte: Alle Setups lassen sich durch den Befehl vite-setup-catalogue testen.

Auch am Kaltstart hat das Vite-Team gearbeitet: Das Tool vermeidet ab Version 3.x das vollständige Neuladen während des Kaltstarts. Das Team hat den Support für das Importieren von Features wie Multiple Patterns, Negative Patterns, Named Imports und Custom Queries neu geschrieben. Details zu den Neuerungen für Wasm lassen sich dem WebAssembly-Bereich im Feature-Guide entnehmen. Die WebAssembly-Import-API hat eine Revision durchlaufen, um Kollisionen mit künftigen Wasm-Standards auszuschließen, wie folgende Codepassage zeigt:

import init from './example.wasm?init'

init().then((instance) => {
  instance.exports.test()
})

Vite heißt schnell

Vite.js (von französisch "vite" für schnell) hat sich im JavaScript-Ökosystem vor allem mit Geschwindigkeit und Entwicklungskomfort duchgesetzt. Als Development-Server und Build-Tool begleitet Vite JavaScript-Entwickler vom Erstellen ihrer Projekte bis zum Release. Hierfür nutzt es die nativen ECMAScript-Module des Browsers und Werkzeuge wie esbuild zum Übersetzen von TypeScript in JavaScript. Die Einbindung von esbuild soll zu einem 10- bis 100-mal schnelleren Prebundling der Abhängigkeiten führen.

Vite hat sich in der JavaScript-Welt etabliert

Seit Vite 2 hat sich ein weitläufiges Ökosystem um das Tool herum ausgebildet, und Vite.js nimmt auf die Entwicklung anderer Webframeworks Einfluss. So verwendet Nuxt 3 mittlerweile standardmäßig Vite. SvelteKit, Astro, Hydrogen und SolidStart werden allesamt mit Vite entwickelt und auch Laravel soll künftig standardmäßig auf Vite setzen. Weitere Frameworks und Tools ziehen mit, so gibt es Vite für Ruby und Vitest gilt in der JavaScript-Szene mittlerweile als Vite-native Alternative zum Testing-Framework Jest.

Vite steckt auch hinter den neuen Testing-Features für Komponenten bei Cypress und Playwright, und Storybook nutzt Vite.js als offizielles Build-Tool. Zahlreiche Maintainer der hier genannten Projekte beteiligen sich aktiv an der Entwicklung und Verbesserung des Kerns von Vite.js und arbeiten eng mit dem Vite-Team zusammen.

Die bisherige Reise

Seit Version 2.0 ist das ursprünglich für Vue.js entwickelte Vite Framework-agnostisch, sämtliche Framework-spezifische Unterstützung wird an Plug-ins delegiert. So gibt es jetzt offizielle Vorlagen für Vue, React, Preact und LitElement; die Integration von Svelte ist in der Mache. Die Konfiguration wurde in Vite 2 zudem deutlicher nach Build- und Development-Server getrennt und insbesondere der Performance hatte das Team damals sein Hauptaugenmerk gewidmet.

Lesen Sie auch

esbuild, Teil 1: JavaScript-Bundling leicht gemacht

Mehr Informationen

Weitere Details finden sich in der Ankündigung zur Freigabe der Version 3.0. Wer tiefer in Vite einsteigen möchte, kann einen bei heise Developer veröffentlichten Fachartikel lesen, in dem ein versierter Vite-Anwender das Werkzeug erklärt. In einem gerade in Vorbereitung befindlichen iX-Developer-Sonderheft zu modernen Programmiersprachen wird eine auf Vite 3 aktualisierte Version erscheinen.

Wechselwillige JavaScript-Developer finden auf der Vite-Website einen Leitfaden zur Migration, und wer bereits tief in der Arbeit mit Vite.js steckt, kann im Changelog einen vollständigen Überblick über alle Neuerungen und Änderungen durchgehen.

(sih)