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.

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

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.

So you can imagine that for large-scale applications, this can be an issue that impedes developer productivity.

Vite, on the other hand, uses native ES modules (ESM) to serve the code. According to their documentation, this means:

Some bundlers like webpack support Hot Module Replacement (HMR). This is when a running application reflects only the changes made, without having to reload the full page. However, as the application gets larger, HMR does take longer, making the page update slower.

Vite also solves this problem as HMR is performed over native ESM. This means that HMR will continue updating the page fast, regardless of the app's size.

Now that we've learned why Vite is a powerful tool that solves common web development challenges, let's start using it!

In this example, I will show you how to setup a React app using Vite. After this, you will no longer have to experience the slowness with Create React App.

First, run the command to create a Vite project:

You will then be asked to name your project like so:

Next, select the 'React' framework for this example:

And you're done! It's almost an instant process, isn't it?

You can simply create a new React app without going through the options using this command:

And yes, don't worry. The app itself has the same structure as what you would expect if you have used Create React App.

Finally, install the dependencies we need and start the app with the following command:

There we have it! Thanks for reading! I hope you have found this article useful in understanding what Vite is, why it is used and how to use it.

For more information, do check out the links below to learn more about Vite and its capabilities. Please share this article and give a like if you have enjoyed the read. Cheers!