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.
This waiting time depends on how big your project is and how many external modules you have imported in your project. As we start to add more and more functionalities to our project, the amount of JavaScript code that needs to be processed is also increased exponentially. Moreover, if we are not only using JavaScript files in the front end, there are a lot of CSS files, static images also. As a result, we reach a point where the bundling mechanism hits a point where it starts to bottleneck.
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.
- Dependencies
- Source Code
How Vite helps to improve starting of the dev server
Dependencies are something that do not change during the lifecycle of the development. They are mostly written in plain JavaScript that a browser can easily interpret. There are some large dependencies that can also take a lot of times to process. Source Code are often written in non plain JavaScript (e.g JSX, TSX, Vue) that needs to transformed into plain JavaScript. Also source code are often edited but not all of the source code is needed to be served at the same time.
Vite processes Dependencies and Source Code differently. It pre-bundles dependencies using esbuild which is proven to be 10-100x faster than traditional JavaScript based bundler. And for the Source Code, Vite serves the source code over Native ESM, basically letting the browser to handle the job of bundling. Vite just transforms and serves the browser code on demand. Dynamic imports are only transformed if and only if it is used on the screen.
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
While 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 the framework of your preference. After that you will be prompted to select framework language (i.e. JavaScript or TypeScript)
Select your preference and you are good to go. In the directory just run:
npm install or yarn install