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.
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.
Table of Contents
What is Vite JS, and Why Should You Care?
In the race to become the next-generation tool, Vite is leading the game.
The name “Vite” comes from the French word for “Fast”, which is pronounced “Vit”.
As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with support for Vue SFCs **with hot reload**. Now it's almost 6AM and I have PoC working. The hot reload is so fast it's near instant.
— Evan You (@youyuxi) April 20, 2020
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.
(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 and React.
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.
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.
vue-next-webpack-preview cold server start: 1909ms / compiled for first view: 2732ms
vite cold server start: 129ms
— Evan You (@youyuxi) May 4, 2020
Here, cold start clocks at around 140ms compared to Vue-CLI 1900ms.
Cold start: 2m15s -> 1722ms
Warm start: 2m15s -> 283ms
Reload: 23s -> Instant!
Build: 3m -> 2m22s
Best productivity upgrade for a long time ⚡️
— Bjorn Lu (@bluwyoo) May 13, 2021
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)
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
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.
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.
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.
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.
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?
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
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.
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?
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.