DEV Community

Cover image for Vite is too fast!
Karan Pratap Singh
Karan Pratap Singh

Posted on • Edited on

Vite is too fast!

Recently I tried Vite and I was blown away by how fast it was. I re-checked if I started the app correctly because I couldn't belive that it started the dev server under 200ms!

So, here's a short article on what is Vite and how can we create a new react project with it.

What is Vite?

Vite is build tool created by Evan You (creator of Vue), it provides faster developement experience with instant server start, super fast Hot Module Replacement (HMR) and out of the box support for TypeScript as well.

Vite pre-bundles dependencies using esbuild. Esbuild is written in Go and pre-bundles dependencies 10-100x faster than other JavaScript-based bundlers.

Blazing fast TypeScript with Webpack and ESBuild If you'd like to learn more about esbuild setup with Webpack 5

Create a new project

Let's create a new project with Vite

yarn create vite
Enter fullscreen mode Exit fullscreen mode

vite select framework

template select

vite done

And we have our vite project πŸŽ‰!

β”œβ”€β”€ index.html
β”œβ”€β”€ package.json
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ App.css
β”‚   β”œβ”€β”€ App.tsx
β”‚   β”œβ”€β”€ favicon.svg
β”‚   β”œβ”€β”€ index.css
β”‚   β”œβ”€β”€ logo.svg
β”‚   β”œβ”€β”€ main.tsx
β”‚   └── vite-env.d.ts
β”œβ”€β”€ tsconfig.json
└── vite.config.ts
Enter fullscreen mode Exit fullscreen mode

Let's start our dev server

cd vite-project
yarn install
yarn dev
Enter fullscreen mode Exit fullscreen mode

vite dev

Build

Vite uses rollup to build and optimize static assets. Let's build our project

yarn build
Enter fullscreen mode Exit fullscreen mode

vite build

We have our static assets ready to be served!

Top comments (17)

Collapse
 
ben profile image
Ben Halpern

Speed is really the only truly measurable UX enhancement. At a certain threshold it's not necessarily the most important thing, but what is more important than time. Anything that can keep me in my flow by not blocking me to wait can be the difference between effective and ineffective capacity to accomplish the task.

So I'm all about this, and generally feel like it's coming from a good place of solving a distinct problem.

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

Totally agreed, anything that can save me or my team’s time is worth writing about. Excited about all the new JavaScript tooling coming out!

Collapse
 
renanlazarotto profile image
Renan "Firehawk" Lazarotto

Is it possible to switch from CRA to Vite?

Collapse
 
yassinebridi profile image
Yassine Bridi

I have done it many times, it's a pretty easy migration.
Though all the CRAs that i have transferred to Vite have no custom Webpack configs

Collapse
 
renanlazarotto profile image
Renan "Firehawk" Lazarotto

The only custom thing I did was add CRACO and Tailwind CSS. I just started learning React, its been a few weeks by now, I'm reading a bit here and a bit there on my spare time, writing a bit of code in my breaks... this kind of stuff. Vite has caught my attention, but I don't want to add another layer of complexity on something that is already confusing.

Thread Thread
 
yassinebridi profile image
Yassine Bridi

I see that you are maybe using craro to enable Tailwind's watch mode etc.., Vite already works out of the box with Tailwind, so i think Vite is better for you in that regard.
CRA is pretty established in the React tooling ecosystem, compared to Vite, so unless you are working on a critical kind of project, Vite is the way to go.

Thread Thread
 
renanlazarotto profile image
Renan "Firehawk" Lazarotto

Nothing critical =) just my portfolio, that I'm using as a excuse to learn React. I'll give it a go then! Thanks for your input!

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

Hey Renan, yes it's pretty easy to migrate to Vite with few changes but if you're new to React ecosystem CRA might be a better choice

Collapse
 
renanlazarotto profile image
Renan "Firehawk" Lazarotto

Hi, thanks for the reply! One question, though: why CRA would be better? Is there anything special about it I should learn before looking for Vite?

Thread Thread
 
karanpratapsingh profile image
Karan Pratap Singh

Hey, CRA is quite stable and most widely used..so If you face any issue there's a good chance that there is a github issue on the CRA's repo and it has either been solved or worked upon actively.

Vite is relatively quite new compared to CRA, you can definely learn Vite..but in the end these tools are just wrappers around bundlers like Webpack, Rollup, esbuild. You can use any of CRA, Vite etc whichever you feel confident with.

Hope this helps!

Thread Thread
 
renanlazarotto profile image
Renan "Firehawk" Lazarotto

Yes, it does! I currently have no issues with CRA, but everywhere I see talking about Vite praises its speed. I'm not exactly in need of any speed improvement as I'm just writing a simple portfolio with maybe 4 pages, I don't see why I would need faster compile times when my compile times are already fast enough. But since I'm quite new to the confusing world of front-end development (and on the even more confusing world of tooling!) I kinda want to learn everything I possibly can.

Thread Thread
 
karanpratapsingh profile image
Karan Pratap Singh

Makes sense. Good luck with your project!

Collapse
 
mohdahmad1 profile image
Mohd Ahmad

Vite uses ESbuild for development and rollup for production bundle

Collapse
 
_mohanmurali profile image
Mohan Murali

with build tools like these, the future of javascript development looks really exciting. One small correction, you have interchanged the screenshot of "select a framework" and "select a variant".

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh

Yes me too, thank you I fixed the issue

Collapse
 
0x46656c6978 profile image
0x46656C6978

I have a very old thinkpad x220 with HDD and everything run up in around 1-2s. Just imagine how fast with newer laptop & SSD :D

Collapse
 
maxprogramming profile image
Max Programming

Vite is my favourite with React and TypeScript!