What is Vite and How can be used in our React project
When are working on a project with technologies like React, Angular and Vue the time that you spend waiting to see that a change will be applied with the hot reloading generally is not a big deal, however in big projects with several amounts of components and views that could take some time to consider. Vite is a tool that will help us with that problems.
What is Vite?
- Instant Server Start: On-demand file serving over native ESM, no bundling required!
- Optimized Build: Pre-configured Rollup builds with multi-page and library mode support.
- Lightning Fast HMR: Hot Module Replacement (HMR) that stays fast regardless of app size.
- Rich Features: Out-of-the-box support for TypeScript, JSX, CSS and more.
- Universal Plugins: Rollup-superset plugin interface shared between dev and build.
- Fully Typed APIs: Flexible programmatic APIs with full TypeScript typing.
What are we going to do during this post?
We are going to create a new React application as an example using Vite and after that, we will try to use some awesome Vite features.
Create the Vite Project
First of all, we need to create the initial scaffolding of our Vite project with the next command
# npm 6.x npm init vite@latest vite-react-example --template react # npm 7+, extra double-dash is needed: npm init vite@latest vite-react-example -- --template react # yarn yarn create vite vite-react-example --template react
Note: Choose the command based on npm or yarn, in the case that needs to check the npm version just execute the command
After you execute the command you will see that will be so fast, just take around 4 seconds in my case to create the initial scaffolding without install dependencies. The time to set up the initial scaffolding is faster in comparison to creating the initial scaffolding with the create-react-app package, because If we remember generally take a lot of time.
brayan@brayan Documents % npm init vite@latest vite-react-example --template react npx: installed 6 in 4.011s Scaffolding project in /Users/brayan/Documents/vite-react-example... Done. Now run: cd vite-react-example npm install npm run dev
The final time comparison creating the initial scaffolding and installing dependencies is 56 seconds with Vite vs around 4 minutes and 42 seconds with Create React App.
The scaffolding created is really similar to the previous app that we created with the create-react-app package.
├── index.html ├── package.json ├── src │ ├── App.css │ ├── App.jsx │ ├── favicon.svg │ ├── index.css │ ├── logo.svg │ └── main.jsx ├── .gitignore └── vite.config.ts
After that, we can start our application with the command
npm run dev
Once the project starts we will see something like that running in our machine http://localhost:3000/
Another difference is when we create the application build with the command
npm run build
The time differences with the build using Vite and Create React App was
|Vite||Create React App|
|2.65 seconds||15.50 seconds|
Finally, you can try to apply changes in the files you will see the hot reloading is really quick.
Vite is an awesome tool that we can use in our React project that will allow saving time in our work and project due to those awesome features provided with Vite. I will be writing a post about Vite and the Angular and Vue integration.
Let me know in the comments recommendations or something else that can be added, I will update the post based on that thanks! 👍