24
Get Faster Creating React Project with Vite
I am new in react and also still learning how to use react. I'm using create-react-app to make react project. The first thing that I notice whenever I created react project with create-react-app are;
- The time it took to make a single project .
- The time it took to start the project.
But all that changed when I got to know ViteJs
According to vite website, Vite is a French word that means "Fast". So, vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. ViteJs is made by the creator of VueJS.
When starting the project server, a bundler-based build setup has seek to your application and build entire application before it can be served.
Vite improves the time that dev server took by dividing the modules in an application into two categories:
Dependencies, Vite pre-bundles dependencies using esbuild. Esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers.
Source code often contains non-javascript like JSX, CSS, or React components that used to be edited very often. Vite only needs to transform and serve source code on demand, as the browser requests it. Code behind conditional dynamic imports is only processed if actually used on the current screen.
To do this testing, I measure the time that both of them took to create and launch react project. And here is the difference between both of them.
As you can see the result has significant difference. Either create project or launch project, Vite has a better performance.
To make react project with Vite is very simple. All you need to do is follow this instruction.
npm init vite@latest- Enter project name and select framework (in this case I use React)
- Then select react variant (I choose react)
- Go to your project app folder and enter
npm installcommand. Your project will be ready within a minute.
So that's it what I could share. I'm truly sorry if my English is not good because it isn't my mother tongue. But I keep learning English to make it better. Writing blog also my learning method to improve my English. So if you have any feedback related to the content or to my English, feel free to share!
24