Why You Should Use Vite With React Instead of Webpack?

This article is not only for react developers but for any developers who are using module bundlers. There may be many reasons why you are using module bundlers; we will not go deep into that. 

Today the primary topic that we are going to talk about is why you should use Vite as the primary module bundler instead of Webpack. Well, the most important reason is that Vite is exponentially faster than Webpack and you won’t regret it but instead thank me for using Vite. 

So let’s compare the time taken to create a react app using create-react-app and Vite. Using create-react-app it took more than 3 minutes just to set up the project while Vite does that in 16 seconds. That’s what I am telling you, Vite, is exponentially faster than Webpack and it requires fewer dependencies. 

Now, let’s go to serving the application. For the initial compiling time, Webpack created using create-react-app takes more than a minute or two while Vite does that almost instantly.

Now the most important reason why I choose Vite over Webpack is the hot reloading. To do hot reloading in Webpack when the project gets bigger it becomes more and more lengthy and at one time, it took about 30 seconds while Vite took no longer than 2 seconds at the most. For the most part, Vite feels instantaneous. Moreover, your computer will be a lot faster and more responsive when working with Vite because it doesn’t take much memory.

The syntax to create react app with:

1. Vite: npx create vite
2. create-react-app: npx create-react-app [Folder name]

That’s all from my side today. And remember to use Vite always. Happy coding!