Image by Copilot

Why I’ve switched to Vite from Create React App

I’ve switched to Vite from Create React App for my React application. You can read more in their official documentation here however I’ll list some reasons briefly why I’ve made that decision. If you have any questions, please feel free to mention them in the comment section.

Image by Giphy

In my previous React projects, I used Create React App, and each time I wanted to change the code, the server would compile all the code from the start. This process typically took a large amount of time, especially for larger projects with multiple files. Over time, I noticed that it consumed a significant amount of memory, causing issues such as slow performance in Chrome and overall system sluggishness for several seconds or even minutes.

Faster Development Server

In the image below, you can see that the compiler took a total of 5 minutes to recompile for a single change. This project utilizes the Create React App compiler.

Image by Author

A sample project utilizing Vite took only 757ms to compile.

Image By Author

Even if you consider that the sample project has fewer files, Vite still compiles faster even for projects with hundreds of files.

That’s a significant leap in development performance.

Under the hood, Vite only serves the files that are in demand as the browser requests them, whereas the Create React App serves all files first and signals that the server is ready.

Image by Vite Dev

Simplified Configuration

Vite’s configuration is simpler and more intuitive compared to the complex configuration of the Create React App, reducing setup time and potential configuration errors.

Modern Typescript Support

There was a major change from TypeScript v4 to v5, and I found it very difficult to migrate my existing project to the latest version of TypeScript due to many errors. Vite supports the latest version of TypeScript, and it’s also very easy to add and remove packages during development itself. Vite fully supports modern JavaScript features like ES modules and native ESM import syntax, enabling developers to take advantage of the latest language features without additional configuration.

Creating a Vite App with React Typescript template

The new command provided by Vite creates a React project in seconds, and developers can later install Node modules as needed.

npm create vite@latest my-vue-app -- --template react-ts

The Create React App command typically takes at least 3 minutes to set up the React project.

npx create-react-app my-app

You can find a sample Vite project used for this article here. Additionally, I’ve created an article that lists some best practices. Please take a look if you’re interested.

Best Practices that I’ve been using for my React Project

If you’ve reached the end, I hope you liked my article. Consider giving a follow; that’ll help me upload more unique content.😇❤️❤️