What's new in Vite 4?

What is Vite?

Vite is a fast and modern build tool for JavaScript applications that has gained significant popularity over the past few years. Its latest release, Vite 4, comes packed with some exciting new features that promise to enhance the development experience even further. Whether one is a seasoned developer or just starting with Vite, the new features in Vite 4 are sure to impress most developers. In this blog post, we’ll take a closer look at some of the key updates in Vite 4 and how they can help improve our workflow.

Vite is a build tool that aims to provide a faster development experience for modern web projects. It consists of two major parts:

A dev server that provides rich feature enhancements over the native ES modules
A build command that bundles the code with Rollup, pre-configured to output highly optimized static assets for production

In simple words, Vite is almost similar to webpack but provides a high-speed build of the project in development mode.

What’s new in Vite 4?

1. Rollup upgrade from v2 to v3

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. Rollup can optimize ES modules for faster native loading in environments that support ES modules. For the environments that don’t support ES modules, Rollup can compile the code to other formats such as CommonJS modules and AMD modules.

Vite 3 is using Rollup 2.

With the release of Rollup 3, Vite 4 is now powered with Rollup 3. This simplified Vite’s internal asset handling and led to many improvements.

2. Reduced Package Size

Vite is mainly focused on speeding up development so Vite 4 install size is 23% smaller compared to Vite 3.2.5 (14.1 MB vs 18.3 MB).

3. New React plugins using SWC during development

SWC (Speedy Web Compiler) is a fast JavaScript compiler written in Rust. SWC and Babel are both JavaScript compilers that transform our code to make it readable by browsers.

SWC is now a mature replacement for Babel, especially in the context of React projects. SWC’s React Fast Refresh implementation is a lot faster than Babel (ReactJs developers might feel relaxed now 😉).

From Vite 4, two plugins are available for React projects-

i. @vitejs/plugin-react

@vitejs/plugin-react is a plugin that uses esbuild and Babel. It helps to achieve fast HMR and, adds flexibility to use the Babel transform pipeline.

The @vitejs/plugin-react plugin is having following properties -

Enable fast refresh on development
No need to add manually import React in .jsx and .tsx modules
Use custom Babel plugins/presets

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

ii. @vitejs/plugin-react-swc (new)

@vitejs/plugin-react-swc is a new plugin that uses esbuild during the build, but replaces Babel with SWC during development. For big projects that don’t require non-standard React extensions, cold start and Hot Module Replacement (HMR) can be significantly faster.

@vitejs/plugin-react-swc plugin is having following properties -

Provides Fast Refresh (~20x faster than Babel).
Enable automatic JSX runtime.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [react()],
});

4. Importing CSS as a String

This feature gives a solution to Vite 3 CSS double-loading behavior that occurs by importing the default export of a CSS file, e.g.:

import cssString from './global.css'

To prevent this behavior, Vite 4 introduces the use of ?inline query suffix modifier.

import cssString from './global.css?inline'

The v3 CSS default export has therefore been deprecated.

5. Browser Compatibility

The modern browser builds now target safari14 by default for wider ES2020 compatibility. To get the support of older browsers, we can add @vitejs/plugin-legacy as usual.

6. Environment Variables

Vite updated its dependencies on dotenv and dotenv-expand. The new versions being used are dotenv 16 and dotenv-expand 9 respectively. This update will require wrapping values that include the characters “#” or “`” in double quotes to ensure proper functionality. Here is an example:

TEST_HASH="need_wrapper_for_#"

7. Upgrades to Vite Core

Vite Core and vite-ecosystem-ci are an integral part of Vite. Vite 4 has added some significant changes to these two.

i. Enhancement of vite-ecosystem-ci

By offering on-demand status reports on the state of the CIs of the significant downstream projects, vite-ecosystem-ci expands Vite’s CI.

Vite 4 will soon be compatible with most projects using Vite, which already prepared branches with the needed changes. Using /ecosystem-ci run in a comment, we can also run vite-ecosystem-ci on-demand on PRs to see the impact of changes before they are applied to the main branch.

ii. Framework plugins out of core

@vitejs/plugin-vue and @vitejs/plugin-react have been part of Vite core monorepo since the first versions of Vite.

In Vite 4, these plugins are moved from the Vite core repo allowing the plugins to be independent for development and maintenance.

Good to go for Vite 4?

Vite 4 provides several great features that will improve the development experience. With the release of Vite 4, Vite confirmed that it will continue its journey of speedy development.