What is Vite.js?

Vite.js is a development tool that comes with a dev server and is used for modern web applications. It offers a faster and smoother workflow in terms of development. It has two major parts:

• A dev server serves the source files over native ES modules, with build-in features and fast Hot Module Replacement (HMR) for updating modules during the execution of the application. When changes are made to the source code of an application, only those changes are updated, without the need to reload the entire application. This helps speed up the development time.

• A build command enables us to bundle our code with Rollup and offers highly optimized static assets for production.

Working

Vite uses esbuild to pre-bundle the dependencies and then immediately launches the server. It then analyzes the code and processes via route-based code splitting. Vite then uses native ESM supporESM, also known as ECMAScript modules, is the official standard format to package JavaScriptt to deliver the code. This enables the browser to do the bundling and development. To implement other performance optimizations, Vite uses Rollup, which bundles the application. 

Get started with Vite.js

To start with Vite, we can use create-app bootstrapper. The tool supports popular front-end libraries, including React and Vue. To use Vite, we need Node.js and npm installed on our computers. 

The following command will run a Vite-bootstrapped application:

The prompts on the terminal will guide us in building the application. Once the application is created, we need to run npm install, then npm run dev to start the development server. Vite also supports vite build that builds the application for production and vite preview for previewing our build locally, like so:

Why Vite.js?

There are several advantages of using Vite:

Hot Module Replacement

Hot Module Replacement (HMR) adds, updates, or removes modules while an application runs without reloading the entire page. This helps speed up the development process as it only updates the changes we just made and retains the application state lost during reloading. It also makes the application incredibly fast regardless of the app size.

Configuration

We can have complete control over the project by extending the default configuration with vite.config.js or vite.config.ts file files in the working directory. A basic config file looks like this:

Conclusion

Vite is an incredible build tool that is relatively new to the market. Its unique features, speedier developer experience, and support for different languages have already been pretty popular among developers. It's great when we want to avoid using a framework but do need minified scripts and styles.