What is Vite?  All you need to know about the new JS bundler

Vite is derived from the French word, pronounced as “Veet,” and it means “quick.” 

It’s the next-generation frontend tool created by Evan You, who is also the creator of Vue js. The tool is essential in setting up modern frontend dev environments critical for web applications. You can use Vite to set up dev environments for frameworks like React, Vue, and even Vanilla JavaScript applications.

The tool comprises both the dev server and the build command interface. Vite’s dev server has rich features enhanced over native ES modules. And it’s built command can package your application source code with Rollup, which pre-configures it to produce tremendously optimized static files for the production environment.

Vite offers capabilities to spin up the dev-server-start time by dividing the application into two segments; the source code and dependencies.

The Source code segment contains frequently edited non-plain JavaScript code components that need constant or frequent transforming and updating, for example, Vue, CSS & JSX. And Vite can speed up the delivery of source code on-demand using the native ESM modules while forgoing the need for bundlers.

On the other hand, dependencies contain plain JavaScript that doesn’t frequently change, especially during development. So, Vite pre-bundles dependencies using the esbuild JavaScript bundler tool.

How does Vite work?

To fully understand how Vite works, we must dig deeper from where everything starts. 

It’s important to note that coding in JavaScript relies on frequently playing with variables or assigning numbers to variables. So, engineers must keep changing and organizing variables throughout the Javascript application development.

Initially, there was an underlying problem where it wasn’t possible to share variables from one function to another in JavaScript applications. So, a traditional mechanism called scoping was devised to solve this problem. This meant you could put variables in a global scope to enable global accessibility capability for any function to manipulate the variables in that scope.

It’s important to note that coding in JavaScript relies on frequently playing with variables or assigning numbers to variables. So, engineers must keep changing and organizing variables throughout the Javascript application development.

Usually, when it’s a simple application, the task is much easier to maintain and organize the code as a few variables are involved. However, the task becomes complicated in complex applications with unimaginable lines of code containing countless variables and functions, especially during maintenance and upgrades. 

But maintaining the scope also proved to be complicated, and it had several technicalities involved. A better way was needed to solve the problem, so a modularized approach was introduced to package variables and functions together. 

Modules are used to organize an application code into self-organized parts with an open accessibility relationship. This means that inside the modules, the components share an open relationship without any limitations.

So inside the module, multiple functions can also share variables, directly challenging the traditional function scope approach. The other benefit of modularized application code is that variables from one module can also be accessed and manipulated by another module which brings a flexible and dynamic capability during the application development.

Initially, JavaScript language didn’t have a standardized modular system, which hindered developers from splitting the code into modules that could be exported or imported. And so, non-standard module systems like CommonJS (CJS) and Asynchronous module definition (AMD) evolved over time.

Handling the CommonJS build “problem”

Now, tools like Webpack, Parcel, and Rollup were also created to support the applicability and functionality of the CJS and AMD modules. While these tools are great, application performance problems were witnessed as more code and dependencies were added to the app. 

In 2015, ES module support was added to JavaScript. Also, ES modules would be the new standardized module system with the native capability to run in the browsers.

Vite solves dev-server cold-start and slow updates problems associated with bundle-based tools like Webpack, Parcel, or Rollup. These tools have to crawl and build the entire application before it is served in the dev server. In the end, the process increasingly becomes slower and more frustrating, especially when the files and dependencies grow.

So, Vite dev-server is programmed to start instantly while solving the slow performance issues associated with the other bundler tools.

Today, one of the most popular modules in JavaScript web applications is ES modules. The ES2015 module version was introduced, but unfortunately, many modern web browsers had compatibility support problems for the ES6 module. 

Vite can forego the bundling step to serve the browser with native ES modules. It plays a big role in allowing browsers to import modules from an application without throwing errors. Vite can rewrite the imports to valid URLs by automatically detecting bare module imports from your source files. 

Features of Vite

Vite provides various features, and these include the following

NPM Dependency Resolving and Pre-bundling

Vite pre-bundles bare module by converting common JS module to ESM Module. This prevents errors in the browser when native ES import is done. The esbuild implements the pre-bundling step and facilitates Vite’s cold start time, making it tremendously faster than any JavaScript-based bundler.

Furthermore, imports are rewritten to valid URLs to facilitate browsers to import them. And the dependency requests are stored in the local cache to make debugging and editing possible when necessary.

Hot Modulation Replacement

Vite provides the Hot Modulation Replacement (HMR) API feature to integrate with other platforms like React and Vue, which provides precision without the need to refresh or reload the page or blow away the application state. The source code can upgrade in the background with the help of the Hot Modulation Replacement functionality while boosting and optimizing application performance.

Typescript

Vite supports the Typescript framework out of the box. Typescript is transcribed into JavaScript by using Vite’s esbuild tool. This functionality is approximately 30 times faster than Vanilla, so updates on the page can happen almost instantly.

CSS Preprocessor

Vite comes with inbuilt CSS libraries you can manipulate to style your application to your needs. This is one of the features you will find interesting in this front-end tooling. 

Why use Vite in your web projects?

Undoubtedly, you have to be flexible to keep up with evolving tech. Modern applications are designed to provide optimized performance to the end users while employing little resources to run and maintain them. 

Vite.JS has taken developers by storm. It’s such an incredible front-end tooling system with the potential to revolutionize how modern web applications are developed.

You would want to use Vite today in your projects for a couple of reasons. And these are:

Performance optimization

Vite uses the esbuild tool to pre-bundle application dependencies that don’t frequently or constantly change during development. The esbuild tool is built with Golang, up to 100 times faster than the other mainstream JavaScript bundlers.

In addition, Vite uses route-based code splitting, a technique used to define the part of the code that needs to be loaded. And this happens on the fly, and it does not have to re-bundle the whole app. Such functionality is the power behind Vite’s strong performance in web applications.

Easy to set up and run

Developers can use Vite to set up development environments for frameworks like Vue, React, and even Vanilla JavaScript applications. You can run Vite as a frontend tooling engine or as a dev-server to spin up robust application development with other frameworks.

Faster browser performance

With Vite, the Hot Module Replacement (HMR) feature is leveraged to change the source code without the need to refresh the browser. The development changes take place in the background as if nothing is happening. This feature is important as it leads to performance optimization critical for any application in development or production environments.

Free and Open-source

Vite is offered under MIT License, so you can use the software freely without facing any legal limitations. You’re free to use, copy, modify, merge, publish, distribute, sublicense, and /or sell the software with restrictions. The Vite developer has made the tool freely available for everyone to use without license restrictions or limitations.

Vite: Pros

Here is a summary of the pros associated with using Vite.JS;

• Drives up application performance using pre-bundling functionality of the esbuild tool
• Easy to set up, and you can get it running using a few commands
• You can freely run the software and make any modifications and changes you want, as it’s offered under the MIT License
• Drives up browser performance using Hot Module Replacement (HMR) feature. The code runs in the background without the need to refresh the browser.
• Solves problems associated with other bundle-based tools like Webpack, parcels, and more. 
• Faster dev CLI start-ups compared to other tools like Vue and React.
• offers Typescript support out of the box.
• It works with other platforms like Vue, Preact, react Svelte, Lit, and vanilla Javascript. 
• Supports Library mode, which is used for creating browser-oriented libraries and functionality
• Comes with built-in functions and libraries. Vite comes with functions like CSS preprocessor, hash naming, HTML preprocessor, compression, asynchronous loading, sub-package, HMR, etc.

Vite: Cons;

Here are some of the cons associated with using Vite.JS;

• It involves using various tools for development and production. You must use the esbuild during development and Rollup for the production bundle. The downside is that bugs can manifest in an application that can be complicated to debug and fix.
• It doesn’t offer Jest support, yet it’s one of the popular JavaScript testing frameworks.
• Has a limited community. Because Vite is relatively new, there are limited instructional resources about it. When you run into unexpected errors, it’s likely to give you a hard time finding the most appropriate solution.

Which companies are using Vite as part of their tech stack?

According to Stackshare, several companies use Vite as part of their tech stack. Some of these companies include the following;

• Mak IT
• WeGift
• Voice flow
• OPENsense
• Navatom
• Stylify
• ValueDesk
• Driffle

How to get started with Vite

To run Vite on your computer, you must first install Node. And then you will need to the following command below;

npm init @vitejs/app. 

Once the above command has been successfully executed, you must follow the next steps to create your first project and spin up the dev server.

Alternatively, you can try out Vite online using a browser-based platform called StackBlitz. This platform offers a virtual workspace environment to run Vite directly in the browser.

What makes Vite faster than its competitors?

Undoubtedly, Vite technology is proving to be disruptive in the market while outpacing competitor tools. Vite provides a faster application performance experience because of the following reasons;

1. On-demand compilation

Vite runs a specific portion of code based on the browser request. This means that the application doesn’t have to compile the entire source. This saves resource consumption and CPU usage.

2. Background update capabilities

Vite uses its Hot Modulation Replacement (HMR) feature, which allows the application to update in the background without the need to refresh the page.

3. Bare module imports

While most browsers don’t support the importation of Bare modules, Vite provides the capability to rewrite the file content and execute module resolution to find a suitable file from the dependencies.

Conclusion

Vite is undoubtedly a revolutionary front-end tool that could be a game changer for your web application development. The kind of power and performance this tool provides makes it the right piece of tech you need for your next project. While Vite is relatively new on the scene, many developers are keen to adopt it for their projects.

At Talendor, we have professional and experienced engineers and developers who can help you to take your web development project to the next level using Vite. Our developers are dedicated, Collaborative, and eager to build relationships with employers and clients of any category. 

Do you need engineers for your next Vite project? Let’s talk, and we will gladly answer your questions. We’re always available to discuss your project in detail and help you fully achieve your business goals.