Introduction to Vite: The Next Generation Frontend Tooling

As a React developer, using Create React App to start new projects and run them can be a pain. Firstly, it is slow to install all the 140MB dependencies when creating a new app. Next, it uses Webpack to bundle the code each time new changes are made. Hence, the larger the app gets, the longer it will take to rebuild the app to reflect changes.

In this article, let me introduce you to Vite, the next generation frontend tooling. At the end of this article, you will learn what are the key features of Vite and how you can easily set up your React Apps with it.

What is Vite and why use it?

Some of you may have heard of Vite before, but what exactly does it do?

Faster server starts

It is essentially a solution to long server starts by serving code over native ES modules. Most tools we have seen like webpack, Rollup and Parcel will hit a performance bottleneck as the application gets larger. It can become quite slow to start the dev server, which can make it frustrating for developers.

This is because those tools are bundle-based, meaning the code has to be completely bundled first in order to start the server.