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
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
Let's start our dev server
cd vite-project
yarn install
yarn dev
Build
Vite uses rollup to build and optimize static assets. Let's build our project
yarn build
We have our static assets ready to be served!
Top comments (17)
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.
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!
Is it possible to switch from CRA to Vite?
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
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.
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.
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!
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
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?
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!
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.
Makes sense. Good luck with your project!
Vite uses ESbuild for development and rollup for production bundle
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".
Yes me too, thank you I fixed the issue
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
Vite is my favourite with React and TypeScript!