DEV Community

Cover image for Vite is too fast!

Vite is too fast!

Karan Pratap Singh on July 18, 2021

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 starte...
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!