Imagine you have an existing react project that contains a lot of external modules and also your own custom module. When you start your dev server, you run npm start or yarn start and then what do you do? You wait for the dev server to start.
How Vite can improve bundling performance
There are two obvious problem with the bundling, Slow start of the dev server and Slow update. When you initially start your dev server, a bundler-based setup starts building your whole project before it can actually serve the browser with the necessary content. But Vite can improve the start of the dev server because it works in a bit different way. You may ask how. We can divide our project into two part.
- Source Code
How Vite helps to improve starting of the dev server
How Vite hepls to improve on demand update of Source Code
When a file is edited in the bundler-based build setup, the whole bundle that contains the source code is rebuilt by the bundler. For obvious reason, it seems inefficient to rebuild the whole bundle as only few lines has changed in the code. In some of the bundlers, dev server runs the bundling in memory that it needs to invalidate the part of the module graph when a file is changed. But yet it needs to rebuild the whole bundle and serve to the webpage. Reconstructing the bundle can be expensive, and reloading the page blows away the current state of the application. This is why some bundlers support Hot Module Replacement (HMR): allowing a module to “hot replace” itself without affecting the rest of the page. This greatly improves DX – however, in practice we’ve found that even HMR update speed deteriorates significantly as the size of the application grows.
In Vite, HMR is performed over native ESM. When a file is edited, Vite only needs to precisely invalidate the chain between the edited module and its closest HMR boundary (most of the time only the module itself), making HMR updates consistently fast regardless of the size of your application.
Vite also leverages HTTP headers to speed up full page reloads (again, let the browser do more work for us): source code module requests are made conditional via
304 Not Modified, and dependency module requests are strongly cached via
Cache-Control: max-age=31536000,immutable so they don’t hit the server again once cached.
Why Vite, not esbuild
esbuild is blazing fast and is already a very capable bundler for libraries, some of the important features needed for bundling applications are still work in progress – in particular code-splitting and CSS handling
Configuring Vite with new project
To start with Vite, it is quite easy. You just have to follow some basic instruction and command. In your root directory where you want to save your project, just run the following command:
npm create vite@latest my-react-app or yarn create vite my-react-app
You will be prompted to select the framework as below:
Select your preference and you are good to go. In the directory just run:
npm install or yarn install
This will install all your dependencies from the package.json file. Then Just run
npm run dev or yarn run dev
That’s it. You have successfully configured and created your react project with Vite.