24
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.
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
Let's create a new project with Vite
yarn create vite
![](https://res.cloudinary.com/practicaldev/image/fetch/s--dbbQK6iq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jppg9dtz2xdio63fekwl.png)
![](https://res.cloudinary.com/practicaldev/image/fetch/s--R7vtjeHl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lk75zsr0bx1949wqotq9.png)
![](https://res.cloudinary.com/practicaldev/image/fetch/s--tEMgHU7l--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bg4cv1egwt85cqzh60f.png)
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
![](https://res.cloudinary.com/practicaldev/image/fetch/s--ty9T80Q1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00g4uk2a0748lyvnmvqm.png)
Vite uses rollup to build and optimize static assets. Let's build our project
yarn build
![](https://res.cloudinary.com/practicaldev/image/fetch/s--3Qzr6sI0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nidopbydbgrdex4fmzfw.png)
We have our static assets ready to be served!
24