What is Vite?
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
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 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-
@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.
@vitejs/plugin-react plugin is having following properties -
- Enable fast refresh on development
- No need to add manually
- Use custom Babel plugins/presets
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.
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.:
To prevent this behavior, Vite 4 introduces the use of
?inline query suffix modifier.
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:
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.
/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-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.