Everything About Vite 4.0: Latest Updates and New Features

Quick Summary: Vite 4.0 is finally here, and we could not wait any longer to give you a quick rundown of the latest version of this front-end tool. The new version comes packed with cutting-edge features like environment variables, enhanced browser compatibility, and a bunch of new plugins to supercharge your development experience. So, if you're into web development and want to stay on the edge, this blog is definitely something to check out!

If you are a front-end developer, then you might be very happy and satisfied since the release of Vite. Well, the every front-end community, including us – a front-end development company - is more than grateful to its creator – Evan You. The possibilities of the fastest front-end development could not have been possible without Vite.

Now you must be wondering why we are praising Vite all of a sudden.

Because this time, Vite is getting 4 times stronger.

Yes! With the prior success of Vite 3.0, the team has officially announced the latest version of Vite – Vite 4.0.

The latest version of Vite JS – Vite 4.0 - is available in the market with a new ecosystem to ensure a smooth upgrade part, powered during build time by Rollup 3.

There’s more than that!

The official team stated that since the release of Vite 3.0, npm downloads per week have gone from 1 million to 2.5 million.

Isn’t it a massive growth?

In such a short span, Vite has gained immense popularity in the front-end development community. Therefore, the ecosystem of Vite is getting stronger with its new releases and updates.

Well, as a well-versed front-end development company, we keep our clients’ products updated with the latest version. Hence, with the release of Vite 4.0, we are also going to implement it in our daily practices for seamless development and user experience. As a result, we will be talking about Vite 4.0 and its new features.

Introduction: Vite 4.0 Ecosystem

As per the report by Jamstack Community Survey 2022, the usage of Vite has increased from 14% to 32% while keeping a high 9.7 satisfaction score.

We can surely see from the above result that the Vite ecosystem is expanding its reach. Moreover, many popular frameworks like Astro 1.0, Nuxt 3, and other Vite-powered frameworks are collaborating and innovating: Solid Start, SvelteKit, Qwik City.

TezJS is backed by Vite since its creation. Storybook also announced its first-class support for Vite as one of its main features for Storybook 7.0. In addition, Deno now comes into the list of Vite-powered frameworks.

As we can see, the adoption of Vitest is exploding, and we can conclude that it will soon represent half of Vite’s npm download. Nx is also investing in the Vite ecosystem and officially supports Vite.

In a nutshell, the magic of Vite is spreading in the dev community and many renowned frameworks are creating that magic with Vite.

The latest version of Vite 4 supports Rollup 3, which ensures the soother upgrade path for Rollup.

Hire Dedicated Vite JS Developers to Build Performance-Driven Apps for Your Enterprise

Hire Developers Now

What’s New in Vite 4?

The latest features of Vite 4 are:

• Play with vite.new
• New React Plugin Using SWC
• Browser Compatibility
• Importing CSS as a String
• Environment Variables
• Patch-Package Support
• Reduced Package Size
• Vite Core Upgrades

Latest Features of Vite 4

Let’s understand each new feature of Vite 4 with a brief here.

Play with vite.new

Vite 4 offers pnpm create vite to scaffold a Vite project with your given framework, or open a started template online to play using vite.new.

Vite 4 also allows you to run pnpm create vite-extra to get access to templates from other frameworks and runtimes, like Deno, SSR, Solid, and library starters. When you run create vite command under the Others option, you can find the create vite-extra templates.

Keep in mind that Vite starter templates are meant to be used as a testing ground for Vite with various frameworks. Some frameworks are now redirecting their starters in create vite as well - create-vue and Nuxt 3 for Vue, and SvelteKit for Svelte.

Our Recommendation: While using Vite 4 for vite.new, our Vite JS experts recommend you contact the starters recommended by each framework when developing your next project.

New React Plugin Using SWC

Speedy Web Compiler – SWC is a great alternative for React projects instead of Babel. The implementation of React Fast Refresh is what makes SWC a popular option for some projects rather than Babel.

Moreover, Vite 4 offers two plugins for React projects with different tradeoffs, which are:

@vitejs/plugin-react

@vitejs/plugin-react is a plugin that uses Babel and esbuild, in order to achieve quick HMR with a small package footprint and the adaptability of being able to leverage the Babel transform pipeline.

@vitejs/plugin-react-swc (new)

A new plugin called @vitejs/plugin-react-swc replaces Babel with SWC while using esbuild during development. Cold start and Hot Module Replacement (HMR) can be significantly faster for large projects that don't require non-standard React extensions.

The team of Vite believes that both approaches are worth supporting at this point. And they are going to invest their time in improvements to both plugins in the future as well.

Browser Compatibility

The modern browser build now supports Safari 14 by default for wider ES2020 compatibility. Hence, modern builds can now use BigInt and the nullish coalescing operator is not transpiled anymore. However, if you wish to support older browsers, you can add @vitejs/plugin-legacy as usual.

Environment Variables

The latest version of Vite – Vite 14 uses dotenv 16 and dotenv-expand 9. And you are required to wrap value with quotes if you have a value including # or ` .

-VITE_APP=ab#cd ef

+VITE_APP="ab#cd ef

You can check about dotenv and dotenv-expand changelog.

Reduced Package Size

Vite is concerned with its environmental impact in order to speed up installation, particularly in the use case of playgrounds for reproductions and documentation. This major results in an increase in Vite's packaging size. The size of the Vite 4 install is 23% lower than that of Vite 3.2.5. (14.1 MB vs 18.3 MB).

Upgrades to Vite Core

Vite Core and vite-ecosystem-ci aim to provide a better experience to collaborators, which ensures that Vite development scales to cope with the ecosystem’s expansion.

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.

Three times every week, we test Vite's main branch using vite-ecosystem-ci, and we get timely reports before introducing a regression.

The majority of Vite-based projects will soon be compatible with Vite 4 as the official team has already created branches with the necessary changes and they will be making them available in the next few days.

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.

Framework Plugins Out of Core

Since the initial releases of Vite, @vitejs/plugin-vue and @vitejs/plugin-react have been a part of the core monorepo. Being able to test and release both Core and the plugins at the same time allowed the core team to have a close feedback loop when making modifications.

Since the team can obtain this input with these plugins maintained on independent repositories using vite-ecosystem-ci, they have been removed from the Vite core monorepo with Vite 4. This has significance for Vite's story of being framework-independent and will allow us to create independent teams to maintain each of the plugins.

The team has kept a window opened in case of finding bugs to report. You can create issues on the new repositories going forward, vitejs/vite-plugin-vue and vitejs/vite-plugin-react.

Confused whether Vite JS will be profitable for your business or not?

Ask Our Experts

Importing CSS as a String

Importing the default export of a .css file in Vite 3 can result in a double loading of CSS.

import cssString from './global.css'

Since a .css file will be emitted, double loading could happen. And it's possible that the CSS string will also be used by the application code, such as when the framework runtime injects it. The .css default export has been discontinued as of Vite 4.

In this situation, the ?inline query suffix modifier is necessary because that does not emit the imported .css styles.

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

Other Vite 4 Features

The features of Vite 4 don’t end here. There’s more.

Following are other Vite 4 features:

• update @types/node to v18
• patch-package support
• support multiline values in env files

Along with many improvements, bugs fixed, and optimizations.

What’s the Next Step?Now that Vite 4 is publically available, the team is working on newly opened issues to avoid disruption by possible regressions. However, they have opened the door for every expert who wants to join the Vite team and put their efforts to improve Vite – on Discord #contributing channel.On the other hand, Vite vs Webpack debate is right on the top. There are still some groups of developers who continue to work with Webpack. On the brighter side, Vite is successfully running the front-end community without having to support legacy technologies.So, now is the time to join the workforce of Vite – the fastest frontend dev tool with its commendable features. If you wish to leverage the latest features of Vite 4, you can find everything on its GitHub profile. Or, you can hire Vite developers from Radixweb for a seamless dev experience.