For coders TYPO3 Tech Corner

Performance in der lokalen Entwicklungsumgebung verbessern mit Vite.

Performance in der lokalen Entwicklungsumgebung verbessern mit Vite.

Performance ist ein allgegenwärtiges Thema in der Technikwelt. Täglich diskutieren wir über die Leistung der neuesten Prozessoren oder finden Möglichkeiten Quellcode weiter zu optimieren. Geschwindigkeit wird so zu einem wichtigen Faktor für unsere Kunden sowie uns selbst als Firma.


Doch abgesehen von der Leistung eines Prozessors, sind Entwickler täglich mit der Geschwindigkeit der lokalen Entwicklungsumgebung konfrontiert. Gerade bei größeren Projekten mit langsameren Build-Prozessen kann hier Performance zu einem ausschlaggebenden Faktor werden.

Vite möchte dieses Problem für den Frontend-Teil eines Projektes lösen. Vite ist ein JavaScript-Build–Tool, welches eine schnellere und schlankere Entwicklungserfahrung für moderne Webprojekte bieten soll. Das Wort “Vite” kommt hierbei vom Französischen und bedeutet “schnell”.

 

Vite Features:

Vite bietet Funktionen wie "Instant Server Start", "Hot Module Replacement (HMR)" und Unterstützung für Typescript, JSX und CSS ohne vorherige Konfiguration an. Die Hot Module Replacement-Funktion von Vite sorgt dafür, dass Änderungen sofort sichtbar sind, was die Arbeit für den Entwickler wesentlich erleichtert. Außerdem abstrahiert Vite einen großen Teil der Konfiguration und ist dadurch einfacher und benutzerfreundlicher.

 

Vite Performance:

Wenn es darum geht, Vue.js-Apps zu erstellen und zu entwickeln, gibt es eine Reihe von Frontend-Toolchains,welche alle ihre eigenen Vorzüge besitzen. Einige Entwickler bevorzugen die Verwendung einer Webpack-basierten Toolchain, während andere Tools wie Vite bevorzugen, welches in enger Kooperation mit Vue entwickelt wurden. Basierend auf einigen aktuellen Blogartikeln, scheint es, dass Vite signifikante Leistungsvorteile gegenüber Webpack-basierten Toolchains bietet.

In einem internen Vue-3-Projekt, an welchem wir kürzlich gearbeitet haben, konnten wir die Startzeit sowohl für den Dev-Server als auch für die Build-Zeiten (Rollup) durch den Wechsel zu Vite erheblich reduzieren. Die Startzeit des Dev-Servers wurde von 5551 ms auf 345 ms und die Build-Zeit von 6244 ms auf 4500 ms reduziert. Davor war die Webpack-basierte Vue-CLI Toolchain im Einsatz.

 

Fazit:

Zusammenfassend lässt sich sagen, dass Vite ein interessantes Werkzeug ist, wenn Du eine Frontend-Toolchain für die Entwicklung einer Web-Anwendung mit Vue.js oder React suchst. Im TYPO3-Kontext ist es jedoch aufgrund der bestehenden Extension-Infrastruktur schwieriger zu integrieren. Hast Du Vite bereits ausprobiert? Welche Erfahrungen hast Du gemacht? Lass es uns auf Twitter wissen!
 

Update:

Wenn du DDEV + TYPO3 nutzt, kann fgeierst/typo3-vite-demo eine Möglichkeit sein, Vite einfach zu integrieren.

Kennst du das: Immer nur schnell schnell?

Wie wäre es einmal mit Zeit und Respekt für Codequalität? Arbeiten im Team? Automatisierte Tests?

Komm zu uns

SQL: Zeige alle Tabellen absteigend nach Größe sortiert

Ich brauche in letzter Zeit häufiger den SQL-Befehl, um herauszufinden, welche Tabellen in der TYPO3-Datenbank am größten sind. Ich habe das Snippet einmal veröffentlicht.

Zum Beitrag

TYPO3 12 mit CKEditor 5: Stile als Einfachauswahl

Wenn man im RTE in TYPO3 einen Link setzt, kann es sein, dass man zwischen verschiedenen Link-Klassen auswählen muss, um beispielsweise Buttons im Frontend zu erzeugen. Neu ist in TYPO3 12 dass man...

Zum Beitrag

Null-Safe Operator im TYPO3-Bereich

Spätestens mit dem Einzug von PHP8 kann es an vielen Stellen zu Problemen mit undefinierten Arrays oder Variablen im Allgemeinen kommen. Hier ein paar Beispiele und einfache Lösung dafür.

Zum Beitrag

Die ersten/letzten Zeilen einer (SQL)-Datei löschen

Zu den nachfolgenden Befehlen gibt es eigentlich nicht viel zu sagen. Manchmal kann es nützlich sein, die ersten (bzw. letzten) X Zeilen aus einer Datei zu löschen. Und wenn die Datei zu groß zum...

Zum Beitrag

b13/container: Kindelemente in der Bearbeitungsansicht hinzufügen und ändern

Anders als in gridelements kann man in der Extension Container von B13 die Kindelemente nicht verwalten, wenn man den Container in der Bearbeitungsansicht öffnet. Wie man das schnell selber einbauen...

Zum Beitrag

Menü-Vergleich: Zahlen, Zahlen, Zahlen

Zum Beitrag