Vite — Frontend Tooling

Cover Image

Vite (Veet) a Javascript build tool which simplifies the way we build and develop Frontend applications.

Quick Read

1. What will Vite do?

Vite does 2 things

• Serve your code locally during development
• Bundle your Javascript, CSS and other assets together for production

There are many other tools out there to do the same thing such as

• Webpack — https://webpack.js.org/
• Rollup — https://rollupjs.org/guide/en/
• Parcel — https://parceljs.org/
• Snowpack — https://www.snowpack.dev/

2. So what’s different with Vite?

It was created by Evan You who created Vue.js on 2021 as a way to simplify and speed up the build process.

Long ago web developers had no native way to combine javascript files together in a modular way. This let tools like Webpack and Rollup that concatnate multiple files together into a single bundle for the browser.

Bundling

The problem is this process becomes increasingly slow as the app adds more code and dependencies.

In 2015, Ecmascript modules were introduced and by 2020 it had widebrowser support allowing developers to import and export files from multiple files in the browser.

Vite leverages the native ES modules in the browser to load your code instantly no matter how large it is.

It also supports HMR(Hot Module Replacement) for extremely fast feedback loop during development.

When building for production it uses Rollup underthehood.

3. Hot Module Replacement in Vite(HMR)

If you see the below example the state count is having a value 11 and there are 2 logo’s at the top. Now if i remove one of the logo and save the file it will replace that particular part rather than re-rendering the entire component. That’s an simple example of HMR

Hot Module Replacement(HMR)

Hot Module Replacement (HMR)

4. Get Started with Vite

To get started run the following command

npm init vite application-name

which will ask you to choose the framework

Choosing Framework

It will create a project with vite.config.js in the project folder where you can make the tweaks in the configurations

Vite.config.ts

To serve the application locally run the following command

npm run dev

Build time of the React application using Vite

It runs your application (React) within 387ms.

once the application is running rather than showing the single javascript file it imports the actual source code

Application with source code

To build the application for production use the following command

npm run build

which will do the code optimization like code-splitting, Dynamic imports and CSS.

Vite Ecosystem

Checkout the Vite Ecosystem post by Patak

The Vite Ecosystem

Vite

Congratulations!!!

In this Post, we have seen about Vite and how it is different from other bundlers. Will catch you up in a new post till then Happy Learning!!! :)