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.