But apart from the performance of a processor, developers are confronted with the speed of the local development environment on a daily basis. Especially for larger projects with slower build processes, performance can become a decisive factor here.
Vite wants to solve this problem for the frontend part of a project. Vite is a JavaScript build tool that aims to provide a faster and leaner development experience for modern web projects. The word "Vite" here comes from French and means "fast".
Vite Features:
Vite offers features such as "Instant Server Start", "Hot Module Replacement (HMR)" and support for Typescript, JSX and CSS without prior configuration. Vite's Hot Module Replacement feature ensures that changes are immediately visible, making the developer's job much easier. In addition, Vite abstracts a large part of the configuration, making it easier and more user-friendly.
Vite Performance:
When it comes to building and developing Vue.js apps, there are a number of front-end toolchains, each with their own merits. Some developers prefer to use a Webpack-based toolchain, while others prefer tools like Vite, which was developed in close cooperation with Vue. Based on some recent blog articles, it appears that Vite offers significant performance advantages over Webpack-based toolchains.
In an internal Vue 3 project we recently worked on, we were able to significantly reduce the startup time for both the dev server and the build times (Rollup) by switching to Vite. The dev server startup time was reduced from 5551 ms to 345 ms and the build time was reduced from 6244 ms to 4500 ms. Prior to this, the Webpack-based Vue-CLI Toolchain was in use.
Conclusion
In summary, Vite is an interesting tool if you are looking for a frontend toolchain for developing a web application with Vue.js or React. However, it is more difficult to integrate in the TYPO3 context due to the existing extension infrastructure. Have you already tried Vite? What experiences have you had? Let us know on Twitter!
