Vite is a build tool for the frontend. It provides a fast and opinionated build tool out of the box with highly customizable API using plugins.
Vite uses Rollup.js internally for bundling. It’s platform-agnostic, meaning it supports many popular frontend libraries, including React, Vue.js, Preact, and vanilla JavaScript, via templates.
The most recent version of this no-bundling JavaScript environment comes with many exciting new features. Released on 16 February 2021, Vite 2.0 features a completely redesigned architecture, a new plugin system, first-class CSS support out of the box, and more.
In this guide, we’ll introduce you to Vite and take a closer look at some of the major changes that shipped with Vite 2.0.
Here’s what we’ll cover:
Vite is a build tool that was initially developed for Vue.js. With the new update, Vite now supports most web frameworks.
Vite serves source code over native ESM. Conditional dynamic imports are only processed when used by the current screen requires the import. The browser takes the job of bundling the source code. Vite only serves and transforms the source code on demand as the browser requests them.
When ES modules were first introduced in ES2016, browser support for ES6 modules was generally poor. Now that many modern browsers support native ES modules and you can use the import and export statements natively, it’s possible to include imports in your HTML using the type+"module" attribute in your script tag to specify that you’re importing a module:
<script type="module" src="filename.js"></script>
The ES import syntax in the source code is served directly to the browser. Any browser that supports the native <script module> automatically parses them, then makes HTTP requests for each import. The dev server intercepts the HTTP requests from the browser and performs code transformations where necessary.
This makes the Vite server insanely fast: Cold start clocks at around 140ms compared to Vue-CLI 1900ms.
Now that we understand what Vite is and how it works, let’s take a more detailed look at what’s new in Vite 2.0 and explore how the latest release helps improve the overall developer experience.
Vite 2.0 comes with faster build time using esbuild. esbuild is a bundler written in Go. It is 10–100 times faster than other bundlers.
Vite 2.0 uses esbuild to convert CommonJS modules to ESM for dependencies. According to the Vite 2.0 release notes, using esbuild instead of Rollup leads to a huge performance boost in build time. Currently, esbuild is used for prebundling dependencies, but the Vite team is planning to shift completely to esbuild in the future.
Vite 2.0 provides high-quality boilerplate for many popular frameworks, including Vue.js, React, Preact, and more. It also provides a vanilla JavaScript boilerplate. TypeScript is supported out of the box with boilerplates such as React and Typescript, Vue and Typescript, etc.
Given its framework-agnostic nature, Vite helps facilitate a uniform tooling experience across frameworks.
Vite’s new plugin system improves the developer experience by doing things like identifying the type of build and accessing configs and dev server configurations, to cite just a few examples. It’s compatible with many Rollup.js plugins out of the box.
The new plugin system exposes API to add middleware to the dev server and uses custom hot module reload handling. The plugin system is based on WMR. The new system extends the Rollup plugin system by providing Vite-specific operations.
Vite now has experimental support for SSR. It supports SSR for Vue 3 and React.js. Vite provides APIs and constructs to efficiently load and update ESM-base source code and automatically externalizes CommonJS-compatible dependencies.
Vite SSR is a very low-level feature; the team aims to provide tooling for a higher level feature.
SSR can be completely decoupled from Vite in the production build. It can also support pre-rendering with the same setup.
Vite 2.0 introduces new CSS features, such as CSS splitting, URL re-basing, and more. Vite supports these features out of the box without any configuration required. The @import and url() paths in CSS are enhanced with Vite’s resolver to respect aliases and npm dependencies.
To put it simply, Vite 2.0 looks amazing. Lets take Vite 2.0 on a test drive by building a very basic, bare-bones React app.
Start by using the React template for Vite 2.0 boilerplate:
yarn create @vitejs/app my-react-app --template react-ts
The folder structure is as follows:
Now your Vite, React, and TypeScript boilerplate is ready.
You can install dependencies using the npm i or yarn command. Once the dependencies are installed, start the dev server using the yarn dev command.
Vite started as a dev server for Vue.js, but over time, it evolved in a full-fledged frontend tooling solution. Vite 2.0 provides an opinionated web development tool. Using esbuild for developer builds and Rollup bundling during production serves to enhance the overall developer experience. The solid out-of-box configuration makes Vite a solid solution for your next development project.
There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.
LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.
LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — start monitoring for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
In web development projects, developers typically create user interface elements with standard DOM elements. Sometimes, web developers need to create […]
Toast notifications are messages that appear on the screen to provide feedback to users. When users interact with the user […]
Deno’s features and built-in TypeScript support make it appealing for developers seeking a secure and streamlined development experience.
It can be difficult to choose between types and interfaces in TypeScript, but in this post, you’ll learn which to use in specific use cases.
Learn more →
