Few days back I came to know about an amazing frontend tool Vite. Since then I am exploring it a bit. Here in this blog post we will go through some of the feature of Vite. We will also see how Vite can make your web development experience faster and better.

There is already a discussion going on around Vite as a replacement of Webpack. In this post we will avoid this discussion. We will focus more on features of it.

What’s the need of bundling tools like Vite in your web app?

Since the ES6 modules introduced it’s a good practice to write JS code in a modular fashion. But in early days a lot of browsers were not handling loading ES6 modules natively. So we have the concept of bundling our code, using tools like webpack. The tools like Webpack and Vite converts source modules into the code that can run in the browser. These tools crawls through your code, find out dependencies and process it. Once processed it generates the bundle of all your module which can run in browser.

What are the problems with existing tools?

As we mentioned above the tools like Webpack and all, crawls through source code and process it. This works fine when you have smaller project and less no of modules. Once project grows and no of modules grows, we start experience following issues.

• Very Slow start of dev server
• Slow file updates
• Slow HMR
• Longer build time

The reason is, code transpile and concatenate takes time once your project grows. This affects the developer ‘s productivity. Every time we have to wait for the build and to start the dev server for every small changes.
So how Vite solves these issues? There are two primary things.

Pre bundling of Dependencies

When we work with web apps we use lots of vendor packages. These are external dependencies which are not going to change during the development. What Vite does is, it pre bundles these dependencies esbuild. esbuild is extremely fast JavaScript bundler.

Dependency resolving and serve

For the application source code, it resolves the dependencies and only transform and serve source code on demand. That means no time spent on bundling your source code before server starts. Here browser will take care of bundling and requesting the module as and when it’s required.

This leads to a great developer experience as we don’t have to have for serve to start. Also there is blazing fast HMR.

Here is how Vite works.

Getting Started with Vite in your React Project

Let’s see an example of how to work with Vite in your React Application. First we will start by adding necessary dependencies in your app.

"devDependencies": {
    "@vitejs/plugin-react": "^1.0.7",
    "vite": "^2.7.2"
  }

Also you have to add a config file. Following is the bare minimum configuration needed. For more options you can check out the documentation here. Vite config

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

To start the dev server with Vite, you just have to use command vite or npm run dev. Once this command is executed it will look for index.html file where you should specify your entry point.

<script type="module" src="/src/main.jsx"></script>

That’s it and it will start the dev server in fraction of seconds. If you check the network tab of your browser you can see the main.jsx is loaded as native ES module.

Fast HMR

HMR is the strategy to allow module to Hot Replace it self without affecting the page. This way we can see our changes instantly on the screen. This works fine when have smaller code but as your project grows HMR takes lots of time. This greatly affects the productivity as every time we have to wait for bundling.

When file is edited and saved it just invalidate the edited module and and its closest HMR boundary. Also if you see network tab, Vite requests the source cod with specific HTTP headers. For dependencies module requests, it uses the cache control header to cache the requests so it does not hit server. For source code module requests it uses 304 Not Modified to conditionally load it.

Because of all these features Vite is becoming popular among developers and its adoption is increasing day by day.

I will soon share my experience of replacing Webpack with Vite in larger project.