Anshul Goyal I love to code and use new technologies.

What’s new in Vite 2.0

3 min read 896

Vite20 Whats New

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:

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 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.

We made a custom demo for .
No really. Click here to check it out.

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.

Faster builds

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.

Framework-agnostic

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.

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 @import and 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:

Vite20 React Folder Structure
Vite 2.0 in React folder structure

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.

Dependencies Installed Start Server Yarn Command

Conclusion

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.

: 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.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

.
Anshul Goyal I love to code and use new technologies.

Leave a Reply