How Dev Server and Hot Module Reload Works in Vite

We generally take for granted the tools that we use almost daily. One of them is Vite, a frontend build tool that has gained traction in recent years and has since become the de facto method for scaffolding React apps.

Why use Vite? Because it’s fast and has already made the best decisions for us to improve the developer experience.

Let’s look how vite improves our local development experience!

In development, Vite doesn’t bundle all your JS into one file, No use of bundler. Browser imports them directly using ES Modules.

For Example:

A script added and any other scripts it imports will be loaded directly by ES Modules.

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

As one can see below, Browser is loading modules directly, no giant bundle.js - each file is a module fetched separately.