Vite JS - Next Generation Frontend Tool

If you are looking to enhance your experience in frontend development, you are not alone in this race. With the same goal, the creator of Vue, Evan You, came up with the new tool called Vite.js. He calls it - the next generation of frontend tooling. A build tool - Vite or Vite.js consists of a dev server that bundles your code for production.

Vite.js allows developers to set up a development environment for frameworks like Vue, TezJS and React and even for Vanilla JavaScript app with a dev server. Moreover, it allows the development team to hot reload in just three commands. Vite supports Rollup.js internally for bundling.

A build tool – Vite.js offers a fast and opinionated build tool out of the box with highly customizable API using plugins. In addition, Vite.js supports many popular front-end libraries like Preact, React, Vue.js, and Vanilla JavaScript through templates.

As we know, Radixweb is a next-gen custom software development company. The front-end developers from Radixweb are quite excited about this new generation of high-performance tooling.

So, in this tech blog, we'll show you how to use Vite and discuss the roadmap for developers to grow the community. Let's dig into it.

What is Vite JS, and Why Should You Care?

via GIPHY

In the race to become the next-generation tool, Vite is leading the game.

Actually, Vite was developed for Vue Single File Components (SFC) as a development server. But with time, Vite has evolved and become a no-bundle JavaScript development server. Now, Vite supports most web frameworks. In addition, it offers a faster, leaner, and smoother workflow for developing modern web applications. In a nutshell, Vite is similar to Vue CLI but leaner and faster.

The name “Vite” comes from the French word for “Fast”, which is pronounced “Vit”.

As a developer, while developing a web application, you might have faced the issue of taking a lot of time to load an application when you make changes. Vite enhances the feedback loop speed during development and makes it super-fast. So, to be precise, Vite will help you in the best possible ways to enhance your speed. But is it the factor of speed that only matters? How about the user experience? Of course, it is of utmost importance again! ReactJS can help you with the characteristics of UI. If you want it to be ultimate and interactive, then experienced ReactJS development company can help you with it in the best possible ways.

(The ESBuild, the high-performance engine under the hood of Vite.)

Here, Vite uses source code over native ESM. And by using ESBuild and ESM under the hood, Vite enhances the startup speed 10-100x. However, the browser bundles the source code. Hence, Vite only serves and changes source code when the browser requests it. So, it becomes a quick process to save the changed code and see the reflected changes in the browser.

Officially, Vite.js has become the bundler for both Svelte and Vue. Therefore, it has gained popularity among the developer community and has become a tough competitor for other renowned frontend frameworks like Lit, TezJS and React.

The latest version of Vite.js – a no-bundling JavaScript environment offers many new features. Released on 16 February 2021, Vite 2.0 offers a completely redesigned architecture, first-class CSS support, a new plugin system, and many more things.

So, if you have not got a chance to use Vite.js, you - as a leading frontend development company, can try your hands on Vite JS for your next project.

Experience your Vue apps exactly how a user does!

Ask Our Experts

How Does Vite JS Work?

Browser support for ES6 modules was typically poor when ES modules were originally introduced in ES2016. As a result, many current browsers now support ES modules natively, allowing you to use the import and export statements natively. Also, you can include imports in your HTML by specifying that you are importing a module using the type+”module” attribute in your script tag:

<script type="module" src="filename.js"> </script>

The documentation of Vite JS states that ES import syntax is served directly to the browser in our source code. <script module> native supported browser parses them automatically, making HTTP requests for each import. The dev server receives HTTP requests from the browser and executes any necessary code changes. This boosts up the speed and makes the Vite server insanely fast.

Here, cold start clocks at around 140ms compared to Vue-CLI 1900ms.

Vite Performance

Vite's pre-bundling with ESbuild speeds up page loading by 10 to 100 times faster than any other JS bundler. Here, the Vite dev server starts instantly, and the browser's changed code is reflected quickly, thanks to the Hot Module Replacement.

Furthermore, you can read more about the performance and developer experience in the Why Vite guide.

Advantages of Vite JS

So, now we have understood what Vite JS is and how it actually works, let’s go a bit deeper to explore the advantages it offers to improve the overall developer experience.

Hot Module Replacement (HMR)

An amazing feature – Hot Module Replacement in JavaScript bundlers changes the source code in the browser without refreshing a browser. With the usage of the Vite JS tool, you don’t need to reload the browser to update the content, as every change is reflected in the browser with an immediate effect.

The Hot Module Replacement is decoupled from the total number of modules. This makes your project consistently faster, irrespective of your app size.

On a lighter note, HMR speed is the bottleneck for front-end developers who use Webpack.

Bare Module Resolving

Browsers don’t yet support bare module imports where you can import from a package name like import { createApp } from ‘vue’ as it’s not a relative path to our node_modules. Vite looks for bare import specifiers in your JavaScript files. Once it finds them, it rewrites them and utilizes module resolution to locate the relevant files from your project dependencies. Then it resolves them as legitimate module specifiers.

On-demand Compilation

As we know, browsers send source files to compile, and only required or changed code is compiled on the screen. Here, unchanged files return a 304 (Not Modified) error code. Unlike other existing bundlers, they compile every located file in your project and bundle them before making any changes. That’s why Vite is a suitable choice for large-size projects.

Configuration Option

If you want to own full control of your project, you can extend the default configuration with vite.config.js or vite.config.ts file in the existing working directory or project from the base root directory.

In addition to it, you can explicitly mention a config file via vite –config my-config.js.

Furthermore, you can add support for custom file transforms by adding a Rollup plugin for build and Koa middleware in your configuration file.

Want to know how Vite changes the game for Vue and Web developers?

Let's Talk

Features of Vite/Vite JS 2.0

Vite offers many features which allow the development experience to be smoother, faster, and leaner. Here are features you can leverage if you choose Vite for your next project!

The latest version of Vite – Vite 2.0 adds many other features as well, which are as below.

Faster Builds

If we talk about the Vite latest version – Vite 2.0, it offers faster build time with ESbuild. Actually, ESBuild is a bundler that is written in Go. It’s 10-100 times faster than any other bundler.

Vite 2.0 leverages ESbuild to convert CommonJS modules to ESM for dependencies. As per the official statement from Vite, Vite 2.0 uses ESBuild instead of Rollup. Eventually, it enhances the performance in build time. At the moment, ESBuild is used for prebundling dependencies.

Framework-agnostic

Vite 2.0 has a high-quality boilerplate for various frameworks, such as Vue.js, React, Preact, and many more. It also offers a vanilla JavaScript boilerplate. Other boilerplates also support TypeScript.

Vite offers a consistent tooling experience across frameworks due to its framework-agnostic nature.

Improved CSS Support

Vite 2.0 offers new CSS features, like CSS splitting, URL re-bashing, and more. However, these features are supported out of the box without configuration. Vite's resolver improves the @import and url() paths in CSS by respecting aliases and npm dependencies.

Experimental Support for SSR

Vite currently backs SSR. It supports SSR for React.js and Vue 3. Vite provides APIs and constructs for loading and updating ESM-based source code effectively. It also automatically externalizes CommonJS-compatible dependencies.

Vite SSR is a very low-level functionality, and the team aims to offer tooling for a higher-level feature in the coming days.

In the production build, SSR can be totally decoupled from Vite. With the same setup, it can also support pre-rendering.

New Plugin System

Vite enhances the experience of the developer by identifying the build type and accessing configs and dev server configurations. It’s compatible with many Rollup.js plugins.

The new plugin system leverages unique Hot Module Reload handling and offers API to add middleware to the dev server. The plugin system is WMR based system. The new system adds Vite-specific functionality to the Rollup plugin system.

Other Features You Can Leverage by Using Vite are:

• Vite supports .tsx and .jsx files with ESBuild for transpilation
• Asset URL handling
• Has great support for Post CSS, CSS modules, and CSS Preprocessors
• Offers support for mode options and environment variables
• Amazing support for TypeScript, using ESBuild for transpilation

How to Build an Application Using Vite.js?

Prerequisites:

We believe that you have everything to create an application with Vite.

• Node.js 10x or higher
• Yarn / npm 5.2 or higher installed on their PC. (Read - how to Install NPM on your desktop)
• Basic knowledge of JavaScript and how frameworks work

Let’s build an app using Vite or Vite 2.0.

Now is the time to take a test drive by creating a very basic and bare-bones React application.

Use React template for Vite boilerplate:

yarn create @vitejs/app my-react-app --template react-ts

The folder structure is as follows:

So, now your Vite, TypeScript, and React boilerplate is ready to serve.

It’s time to install dependencies with npm i or yarn command. Once you are done with the installation process, you can start the dev server using the yarn dev command.

Tadda! You are now ready with a Vite-driven application.

Develop a next-gen app with a great frontend dev tool, Vite!

Let's Create an App Now

Why Use Vite JS?

The primary advantage a developer can leverage is Vite’s amazing development experience. It works fast, loads fast, and allows you (developer) to accomplish your work in a quick time. Moreover, the plugin ecosystem lets you extend your app in many ways, depending on your requirements. Several opinionated templates give additional built-in functionality, such as Vitesse by Anthony Fu of the Vue core team.

With that consideration, Vite can be helpful to you in multiple ways, such as:

What is Vite JS Used For?

Conclusion

It looks like Vite is a pretty cool build tool and still new in the industry. Well, it’s a new tool in the market and gives tough competition to other dev tools like Snowpack and Parcel, which simplifies the tooling experience. However, it has also proven its popularity in front-end development by offering many features like a fast development environment, faster developer experience, leveraging modern tooling, and multiple-languages support.

In fact, Vite will not surpass Vue CLI at the recent time. Though Even has said that it is the way forward for Vue tooling. Its faster uptime, seamless developer experience, and vibrant community will only grow with time.

This is the solid reason you should give it a try with Vite. So, next time you need to spin up a quick app in Vue or React, give your hands a try on Vite. We actually look forward to seeing what you think on Vite! Contact us and let us know your feedback.