instead of CRA (Create React App)
Photo by Lautaro Andreani on Unsplash
If you are a ReactJS beginner then you must have checked the React Documentation and started with
npx create-react-app my-app
This will simply create a ReactJS app inside a folder named my-app but why do most modern web developers avoid this traditional way?
Before jumping into the weird and confusing terms, let’s understand what is a “Bundler”.
A “Bundler” is a dev tool that combines the JavaScript code files and makes those production ready to be loaded on the browser.
There are various bundlers like “Web Pack”, “Parcel”, “SnowPack”, and “Vite”.
The Create React App also referred “CRA” by Web devs uses WebPack for building and starting the Dev Environment, and there is a faster alternative available that we are going to see today, it’s called Vite.
Vite (Pronunciation Vit) created by Evan You (who is also the creator of VueJS) is a Bundler that can be used with React or even with Svelte, Vue, or VanillaJS.
But how Vite is better than Webpack?
How Webpack works?
Working of WebPack
When it comes to Webpack, it builds all the JavaScript modules and creates Bundles after which the server starts and can be accessed in the browser.
If the App has multiple routes and lots and lots of components then it takes a lot of time for the dev server to start since it’s waiting to build the Bundle.
How Vite Works?
Working of Vite
But when it comes to Vite, it simply starts the server with minimal requirements and then when we access any of the routes then it builds the modules on-demand, making it faster since there is no wait to build the entire bundle with all the bundles.
Not just the Development server, Vite fastens the Production build. Vite uses Rollup which is a pre-configured bundler that is faster than Webpack.
That was a lot of theory, let’s dive into code now (Before starting let me tell you it will a small tutorial though)
You can use the following command to create a new ReactJS App with Vite
npm create vite@latest
This will ask you some prompts like Project Name, Framework (Vue, React, Svelte, Vanilla, etc.)
Whether you want to use TypeScript or not.
After it’s done, it will show you instructions to get started.
npm create vite@latest
I hope this article was helpful to you, if you do then please give me some claps, follow me, and share this article with your friends on social media.
You may follow me on Twitter, LinkedIn, or right here on Medium where I am active and share similar content.