Vite — Frontend Tooling

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

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 lets tools like Webpack and Rollup concatenate multiple files together into a single bundle for the browser.

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 wide browser 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 an extremely fast feedback loop during development.

When building for the production it uses Rollup under the hood.

3. Hot Module Replacement in Vite(HMR)

If you see the below example the state count has a value of 11 and there are 2 logos at the top. Now if I remove one of the logos and save the file it will replace that particular part rather than re-rendering the entire component. That’s a simple example of 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

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

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

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
*One of the strongest points in Vite is the ecosystem around it. Vite took responsibilities from frameworks ( common web…*patak.dev

Vite
Next Generation Frontend Toolingvitejs.dev

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!!! :)