Introduction to Vite: The Next Generation Frontend Tooling

4 min readNov 9, 2022

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.

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:

Letting the browser take over part of the job of a bundler. Vite only needs to transform and serve source code on demand, as the browser requests it. Code behind conditional dynamic imports is only processed if actually used on the current screen.
Source: Vite documentation