Vite js: The Lightweight and Lightning-fast Build Tool for Your Next Web Project

Vitejs is a fantastic build tool, that aims at providing a faster and better development experience for web projects. This article aims at taking an in-depth look at what Vitejs is, how it works, and its benefits.

What is Vitejs

Vite js is a fantastic frontend build tool that boosts the frontend development experience by providing :

Fast server start times by serving files to the browser via native ECMAScript modules (ESM).
Optimized builds using Rollup and Esbuild for generating static assets for productions
Super fast hot module replacement.

Before we look into detail how Vitejs accomplishes these, let's have a look at what modules are in Javascript and why exactly we need a module bundler.

Understanding Modules

Most often, when building small web pages, putting all our functions in one javascript file, let's say main.js , would be fine. This is not the case when building larger javascript applications where separation of concern is key. we need a way to separate different files based on the functionality of what they do. This is where Javascript modules come in. A module is simply a file that carries out some specific functionality and allows you to share its functionality with other parts of your application. To allow a module to be used elsewhere in our application, we use the export statement, and to use that module in another file, we use the import statement. the most common module systems are ECMAScript modules(ESM) and CommonJs(CJS).

How does the browser fetch and evaluate modules?

The web browser fetches and evaluates imported modules via HTTP get request. it also fetches and evaluates the module's imports when needed. let's see an example.

Below is a simple javascript application that uses modules:

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="main.js"></script>
  </head>
  <body>
    <h1 id="app"></h1>
  </body>
</html>

we import our main.js file here, which simply imports a constant from the hello.js module and sets that as the H1 text.

import { hello } from "./hello.js";
document.getElementById("app").innerHTML = hello;

and our hello.js is a simple module that exports a constant

export const hello = "Hello";

now let's head to our web browser and see how it works.

When we open the webpage, we see a Hello message, which is expected. now let's look at our network tab:

The 2 files that are of interest to us here are the main.js file and hello.js file which has been fetched by our browser. But hold on a minute, why are we having a 304 status code? well here is the thing, when the browser first makes a request for a module, the browser gets back a status code 200 which is fine.. on subsequent requests, if the requested module has not changed, we get a 304 response status code which means not modified.

Note: This concept will serve as a good foundation for understanding how Vitejs serves our source code.

Understanding module bundlers

Module bundlers bundle multiple js files into a single file, that can be downloaded and executed by the browser. Not only javascript files but also bundling images and CSS files into static assets. Now imagine you are building a very large application, and you have multiple modules and also utilize multiple 3rd party libraries. You could see how inefficient this will quickly become in terms of managing all these dependencies, and also for N number of modules you use in your application, your browser will have to make N HTTP requests for those various modules, which is not very ideal. A module bundler will get an entry point, in our case main.js generate a dependency graph by looking through the dependencies of its dependencies, and bundle that into one javascript file our browser can execute.

Module bundlers also provide functionality like dev servers, Hot module replacement, and more. Examples of some module bundlers are Webpack, Rollup, Parcel, and Vitejs.

We have gotten an idea of how javascript modules work, and we have also seen what module bundlers are and how they work. Now that the basic foundation is laid, let's move to understand how Vitejs operates and how it improves your development experience

Understanding Vitejs

With traditional bundlers, they build and serve files during development and create optimized builds for production when needed. This is fine and is what most devs have been comfortable with for years, but the benefits of building files during development and production weigh more on the production side and could be very uncomfortable to deal with during development. Other Bundlers often face the following problems:

Slow server start in large apps since app modules/components need to be built and served
Slow updates to reflect changes since the whole application has to be rebuilt and served

Vite js provides the best of both worlds(optimization for development and production) by serving our files/components via native ES modules during development and creating static assets for production.

How Vitejs solves slow server start time

With other module bundlers like Webpack, during server start, the module bundler traverses the dependencies of dependencies(generates dependency graph), creates a bundle, and then serves this bundle. This is the typical behavior with applications with no code splitting, hence components that are not currently being displayed or not necessary are also bundled, causing very large applications with many modules/components to take some time to be bundled and served.

Vite js solves this by dividing our application modules into 2 categories: dependencies, and source code. The dependencies are 3rd party libraries that don't change during development and are quite large and expensive to process. Vitejs prebuilds these dependencies using ESbuild, a module bundler written in Go which is 10x faster than other javascript-based module bundlers. The source code is non-plain components/files that need to be transformed to plain js e.g(JSX components and CSS ) and are often edited and changed during the development process. So in summary, during the initial server start, only our main entry file and its dependencies are transformed to Js and served to our browser via native ESM.

How Vitejs solves slow updates

Most modern module bundlers support Hot Module Replacement(HMR), which is simply updating just the edited module and reflecting its changes in the browser without rebuilding the entire application and causing the browser to reload which will lead to the application state being lost. But even HMR could be slow for most very large applications, hence they might be a slight delay for changes to be reflected. Vitejs solve this by:

Performing HMR via native Es module: when a file is updated, a single HTTP request is made to download just the updated file/module with the help of 304 not modified status code as we saw earlier, making updates consistently fast regardless of the size of your application.
Vitejs Caches dependencies are initially pre-built with ESbuild in our browser, hence preventing unnecessary dev-server requests.

Bundling for production

Vite js uses Rollup under the hood to create optimized production-ready static assets. Hence Vitejs uses ESbuild to pre-build dependencies during development and Rollup for production builds.

Conclusion

Vite js is an amazing tool, which will help to improve your development experience and also create optimized production builds. Vitejs should be the go-to bundler for your next front-end dev project.