Following the release of Vite 3 five months ago, Vite 4 is now officially released. Today npm has gone from 1 million downloads per week to 2.5 million and continues to grow. In this year’s Jamstack Conf survey, usage in the community jumped from 14% to 32%, while maintaining a high satisfaction rating of 9.7.

major changes

Compared with Vite 3, this major version is a minor update, the main purpose is to upgrade to Rollup 3. We have worked with all parties in the Vite ecosystem to ensure that this new major release has a smooth upgrade path.

Rollup 3

Vite now uses Rollup 3, which allows us to simplify Vite’s internal resource handling and has many improvements. Click here for the Rollup 3 update notes.

Framework plugin out of Vite core monorepo

@vitejs/plugin-vue and @vitejs/plugin-react It has been part of the Vite core monorepo since the first version of Vite. This helps us have a tight feedback loop when making changes, as we get both Core and plugins tested and released.with the help of Vite-ecosystem-ci, we can get this feedback through these plugins developed in separate repositories. So starting with Vite 4, they have been moved from the Vite core monorepo.

Use SWC’s new React plugin during development

SWC is now a mature alternative to Babel, especially in the context of React projects. SWC’s implementation of React Fast Refresh is much faster than Babel and is now a better choice for some projects. Starting with Vite 4, there are two plugins available for React projects, each with different trade-offs and trade-offs. We think both approaches are worth supporting at the moment, and we will continue to explore improvements to both plugins in the future.

@vitejs/plugin-react

@vitejs/plugin-react is a plugin using esbuild and Babel that enables fast HMR with a small package footprint and flexible use of the babel transform pipeline

@vitejs/plugin-react-swc (new)

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

compatibility

Modern browser builds now default to safari14 Aiming for wider ES2020 compatibility.This means, modern builds can now use BigInt, and the nullish coalescing operator is no longer translated.If you need to support older browsers, you can add as usual @vitejs/plugin-legacy.

Import CSS as a string

In Vite 3, import the default exported .css files may cause repeated loading of CSS.

import cssString from './global.css';

Starting from Vite 4,.cssThe default export has been deprecated.In such a case, use the ?inline query postfix modifier since it does not emit imported .css style.

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

Other functions

• Support patch-package when pre-bundling dependencies
• Cleaner build log output, and switch to kBto align with browser developer tools
• Improved error messages during SSR

Quick Links:

Documentation in different languages: