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.
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:
- What is Vite?
- How does Vite work?
- New features in Vite 2.0
- Building a React App using Vite 2.0
What is Vite?
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.
How does Vite work?
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
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.
New features in Vite 2.0
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 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.
Given its framework-agnostic nature, Vite helps facilitate a uniform tooling experience across frameworks.
New plugin system
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.
Experimental support for SSR
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.
Improved CSS support
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
url() paths in CSS are enhanced with Vite’s resolver to respect aliases and npm dependencies.
Building a React App using Vite 2.0
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.
LogRocket: Full visibility into your web apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
Experience your Vue apps exactly how a user doesDebugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. https://logrocket.com/signup/
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.
Modernize how you debug your Vue apps - Start monitoring for free.