Vite 3.0: Introducing the Latest Version of Vite

Quick Recap: Vite has always been the preferred choice for modern front-end developers. Now, its latest iteration, Vite 3.0 is finally here. It is a testament to its constant evolution and commitment to high performance. In this blog, we delve into its core upgrades, from optimized builds to experimental features that foreshadow the future of web development. Read on to leverage its capabilities and elevate your development process with Vite 3.0.

It's been a long time since Vite was released, and it has made a great impact and seen huge popularity in developer communities as the best frontend tool. With its faster performance experience, Vite has turned out to be a next-generation frontend tool.

Well, it was just the time of February 2021 when Evan You (creator of Vue) released the second version of Vite – Vite 2. And since then, the popularity and implementation of Vite have grown and reached almost 1 million npm downloads per week.

Whoaa! A huge number…

After the huge success of Vite 3, a sprawling ecosystem is formed. Therefore, Vite is now extending support for various modern web frameworks like Nuxt 3. In addition, emerging frameworks, such as TezJS, SvelteKit, Astro, Hydrogen, and SolidStart, are built using Vite.

Laravel has extended support for Vite by default. Vite Ruby shows how Vite can enhance Rails digital experience. Meanwhile, TezJS has also become an official framework, which is built using Vite and is responsible for the fastest website performance. And the list goes on.

Vite 3.0 is Here!

Today, after almost 16 months of Vite 2, Evan You has announced the latest version of Vite – Vite 3.0.

The latest version of Vite 3.0 comes with a new Vite major aligned with the EOL of NodeJS and reviewing Vite’s API regularly with a short migration path for projects in the ecosystem.

If you are wondering what’s happening here and what is Vite? We surely recommend you go through our Vite introduction guide.

What’s New in Vite 3.0?

The most recent update to the front-end build tool, Vite 3.0, is now accessible and includes several developer-friendly enhancements, including a better command-line interface, a server port change to prevent incompatibility with other tools, and a new default connection scheme that makes Vite work out of the box in most circumstances.

According to the Vite.js website, the Vite team plans a major release yearly to align with major Node.js versions.

Additionally, Vite frequently releases incremental updates; additional content could be made available as early as this next week, according to Patak, a member of the Vite core team.

Create Vite Starter Templates

A useful tool for quickly testing Vite with your preferred framework is create-vite templates. Every template in Vite 3 received a new theme to fit with the updated documents.

Open them online and begin Vite 3 play right away:

• create-vite
• create-vue
• create-svelte
• create-react
• create-preact
• create-lit

All templates now use the same theme. This should make it easier to understand the range of these starters' capabilities as basic Vite templates.

There are official Vite-powered templates for several frameworks, notably create-vue and create-svelte, if you're looking for more comprehensive solutions with linting, testing setup, and other capabilities.

At Awesome Vite, there is a list of templates that is community-maintained.

Build the Fastest Web App Using Vite 3

Let’s Build

Improvements for Developers

Vite.js has become the first choice for fast bootstrapping and easy configuration. It’s speedy compared with other frontend tools for developers. Therefore, Vite offers many improvements for developers. Let’s understand them in detail now.

Vite CLI

Here, you can see that the default server port is now 5173, and the preview server is listening at 4173, apart from the CLI’s aesthetic improvements. With this modification, Vite will no longer collide with other tools.

Better WebSocket Connection

The bottleneck Vite 2 had - configuring the server while running behind a proxy, has been resolved in Vite 3. In many cases, Vite 3 modifies the default connection scheme to work right out of the box. Through vite-setup-catalogue, each of these settings is currently evaluated as a component of the Vite Ecosystem CI.

Cold Start Improvements

When plugins inject imports during a cold start while crawling the initial statically imported modules, Vite now avoids a full reload.

In Vite 3, the browser doesn't receive the optimized deps until the static imports have been crawled. If a dep is missing (for instance, one that was injected by a plugin), a brief optimization phase is issued before the bundled deps are sent. Therefore, a page reload is no longer required in these situations.

Aligning WASM Import with Future Standards

The WebAssembly import API has been updated to improve flexibility and prevent conflicts with emerging standards:

Build Improvements

ESM SSR Build by Default

ESM builds were already used by the majority of SSR frameworks in the ecosystem. Thus, ESM becomes the standard format for SSR builds in Vite 3. As a result, dependencies are externalized by default, streamlining earlier SSR externalization algorithms.

Improved Relative Base Support

Since Vite 3 now supports relative bases correctly (using base: ‘ ‘), created assets can be deployed to several bases without having to be rebuilt. When deploying to content-addressable networks like IPFS, for example, where the base is unknown at build time, this is helpful.

Experimental Features

HMR Partial Accept (Experimental)

HMR Partial Accept has opt-in support for Vite 3. With the help of this functionality, framework components that expose several bindings from a single module might gain access to finer-grained HMR.

Built Asset Paths Fine-grained Control (Experimental)

This may not be sufficient in other deployment cases.

For example, fine-grained control over route construction at build time is necessary, if the created hashed assets must be deployed to a different CDN from the public files. An experimental API is available in Vite 3 to change the built-in file paths.

Migrate Your App Using v3 and Reduce the Publish Size

Make an App 30% Smaller

Bundle Size Reduction

Vite is concerned with how many apps it publishes and installs footprints. And a fast installation is what makes Vite 3 stand out among other tools.

Vite strives to use modern lightweight alternatives whenever possible and bundles the majority of its dependencies. Therefore, the published size of Vite 3 is 30% smaller than Vite 2.

Let’s take a look at the chart here:

Some of the optional dependencies were eliminated in Vite 3. Let’s start with Terser. It has been removed from default installation. Since the esbuild was made the default minifier for both JS and CSS in Vite 2, the requirement was no longer required. You must install it (npm add –D terser) to use build.minify: ’terser’.

Additionally, node-forge was also removed from the monorepo and added a new plugin that supports automatic HTTPS certificate generation: @vitejs/plugin-basic-ssl.

The extra size wasn't necessary because this functionality only generates untrusted certificates that aren't added to the local storage.

Compatibility Notes

• Now NodeJS 14.18+ / 16+ is required as Vite no longer supports NodeJS 12/13/15, which reached its EOL.
• With a CJS proxy to the ESM entry for compatibility, Vite is now published as ESM.
• The end browsers, which have the Native ES Modules, Native ESM Dynamic Import, and import.meta features are now supported by the Modern Browser Baseline.
• According to the format and package type of the output JS entries and chunks, JS file extensions in SSR and library mode now utilize the valid extension (js, mjs, or cjs).

Improved Vite Core

• Vitest now offers a faster and more stable DX thanks to the migration of unit and E2E tests. This action serves as dog food for a crucial environmental infrastructure project.
• The latest VitePress build has undergone CI testing.
• Following the rest of the ecosystem, Vite upgraded to pnpm 7.
• Playgrounds have been moved to /playgrounds out of packages directory.
• The playgrounds and packages are currently "type": "module".
• plugin-vue-jsx and plugin-legacy were switched to TypeScript, and plugins are now packaged using unbuild.

What’s Next?With the new launch of Vite 3.0, the Rollup team is also working on its major updates; that’s for sure. Once the latest version of Rollup rolls out, we can surely see another opportunity to introduce more significant changes, which could stabilize some of the experimental features.Moreover, many developers have shifted to Vite over Snowpack. Besides, while talking about Vite vs Webpack, some developers will continue using Webpack, as code that relies on old-style modules such as CommonJS or AMD, still exists. However, ES modules are definitely the future of JavaScript modules. Therefore, Vite can succeed without having to support legacy technologies.The excitement doesn’t end here. The Vite team is already looking ahead with Vite 4.0 on the horizon. We can anticipate further performance improvements, add-on advanced features, and even more streamlined developer experience.So, now is the time to join the fastest frontend dev tool – Vite. Next time you need to build the fastest app, don’t forget to try your hands on the latest version – Vite 3. Or, if you plan to hire Vite developers, you can surely get your project done by sharing your requirements.