Direkt zum Seiteninhalt springen

Schnellere Front­end-Builds mit Vite

Bei F7 legen wir großen Wert darauf, mit den richtigen Tools zu arbeiten. Wir sind immer bestrebt, unseren Tech-Stack zu modernisieren, unsere Arbeitsabläufe zu vereinfachen und effizienter zu gestalten. Vor kurzem haben wir unser Frontend-Setup durch den Wechsel zu Vite stark verbessert. Der Geschwindigkeitszuwachs war enorm.

Vite hat nicht nur unsere Builds schneller gemacht. Es hat unsere gesamte Entwicklungsumgebung sauberer, schlanker und einfacher gemacht.

Warum wir uns für Vite entschieden haben

Vite, ausgesprochen „veet“, was auf Französisch „schnell“ bedeutet, ist ein modernes Frontend-Build-Tool, das auf nativen ES-Modulen basiert. Das macht es in der Praxis extrem schnell, vor allem während der Entwicklung.

Aber die Geschwindigkeit war nur ein Teil des Reizes, Vite verfügt über sinnvolle Voreinstellungen und integrierte Unterstützung für gängige Tools, die im modernen Webentwicklungs-Ökosystem jeden Tag verwendet werden. TypeScript, JSX, React, Vue und andere moderne Funktionen funktionieren sofort nach dem Entpacken. Es besteht keine Notwendigkeit für umfangreiche Konfigurationen oder benutzerdefinierte Setups.

Das ist, was uns auf Anhieb aufgefallen ist:

  • Sofortiger Start in der Entwicklung
  • Schnelle Rebuilds mit nativem ESM und intelligentem Caching
  • Unterstützung für moderne Frameworks und Syntax mit null Konfiguration
  • Ein sauberes, minimales Setup, das nicht im Weg steht
  • Eine Plugin-freundliche Architektur, die sich an jedes Projekt anpassen lässt

Was sich für uns verbessert hat

Seit der Umstellung auf Vite haben wir sowohl bei der Entwicklung als auch bei der Bereitstellung spürbare Verbesserungen festgestellt.

  • Die Build-Zeiten sind je nach Projekt 3 bis 10 Mal schneller
  • Unsere Konfigurationsdateien sind kleiner und leichter zu verstehen
  • Wir haben die Anzahl der Abhängigkeiten, die wir pflegen, reduziert.
  • Benutzerdefinierte Module und Bibliotheken von Drittanbietern erfordern keine Hacks oder spezielle Handhabung

Die Arbeit mit unserem Frontend-Code fühlt sich schneller und weniger anfällig an. Es ist einfacher zu debuggen, zu testen und auszuliefern.

Gebaut für Er­wei­te­rungs­mög­lich­kei­ten

Einer der Hauptgründe, warum Vite so gut zu uns passt, ist seine Erweiterbarkeit. Die API ist leichtgewichtig und flexibel, was sie zu einer natürlichen Ergänzung für Typo3 und die Art und Weise, wie wir projektübergreifend arbeiten, macht.

Wir haben jetzt die Freiheit, benutzerdefinierte Plugins und Workflows zu erstellen, die perfekt in unsere Umgebung passen. Egal, ob es darum geht, den Umgang mit Assets zu optimieren, Teile der CMS-Integration zu automatisieren oder interne Tools zu entwickeln, Vite gibt uns die Struktur, um dies sauber umzusetzen.

Es eröffnet uns eine Vielzahl von Möglichkeiten, unser Frontend-Ökosystem zu erweitern und zu verbessern.

Ein Fundament für die Zukunft

Bei der Umstellung auf Vite ging es nicht nur darum, die Entwicklungsgeschwindigkeit zu erhöhen. Es ging darum, den Grundstein für einen moderneren, wartbaren und skalierbaren Frontend-Stack zu legen.

Unsere Projekte sind jetzt schneller zu erstellen, einfacher zu bearbeiten und besser auf die aktuellen Best Practices abgestimmt. Die Erfahrung der Entwickler hat sich verbessert, die Codebasis ist schlanker geworden und der Weg in die Zukunft ist viel klarer.

Und das Beste daran ist, dass wir gerade erst angefangen haben.