Vite.js 3.0: JavaScript build tool gets faster

Vite.js, the development and build tool from Vue.js inventor Evan You, has been released in version 3.0. As of version 2.0 of February 2021, it is considered ready for production and has since grown greatly in popularity and prominence. In the blog entry for Vite 3, Evan You’s team refers to over a million downloads – a week. With Vite 3.0, the team is heralding a fixed release cycle: In the future, a new major release will appear at least once a year.

New ports are designed to prevent collisions with other tools

Some changes in Vite 3 are important for working with the tool: The default server port is now 5173 and the preview server is listening on port 4173. This is to avoid collisions with other tools. Vite3 changes its connection scheme in such a way that it should be ready for use “out of the box” in most use cases, i.e. without any prior configuration effort: All setups can be carried out using the command vite-setup-catalogue testing.

The Vite team has also worked on the cold start: As of version 3.x, the tool avoids complete reloading during the cold start. The team rewrote support for importing features like multiple patterns, negative patterns, named imports, and custom queries. Details on what’s new for Wasm can be found in the WebAssembly section of the Feature Guide. The WebAssembly import API has undergone a revision to avoid collisions with future Wasm standards, as shown in the following code snippet:

import init from './example.wasm?init'

init().then((instance) => {
  instance.exports.test()
})

Vite means fast

Vite.js (from French “vite” for fast) has established itself in the JavaScript ecosystem primarily with its speed and ease of development. As a development server and build tool, Vite accompanies JavaScript developers from creating their projects to release. To do this, it uses the browser’s native ECMAScript modules and tools such as esbuild to translate TypeScript into JavaScript. The integration of esbuild should lead to a 10 to 100 times faster prebundling of the dependencies.

Vite has established itself in the JavaScript world

Since Vite 2, a sprawling ecosystem has grown around the tool, and Vite.js is influencing the development of other web frameworks. Nuxt 3 now uses Vite by default. SvelteKit, Astro, Hydrogen and SolidStart are all developed with Vite and Laravel will also use Vite as standard in the future. Other frameworks and tools are following suit, for example Vite for Ruby and Vitest is now considered a Vite-native alternative to the Jest testing framework in the JavaScript scene.

Vite is also behind the new component testing features at Cypress and Playwright, and Storybook uses Vite.js as the official build tool. Numerous maintainers of the projects mentioned here are actively involved in the development and improvement of the core of Vite.js and work closely with the Vite team.

The trip so far

Since version 2.0, Vite, originally developed for Vue.js, is framework-agnostic, all framework-specific support is delegated to plugins. There are now official templates for Vue, React, Preact and LitElement; the integration of Svelte is in the works. In Vite 2, the configuration was also separated more clearly into build and development servers, and the team’s main focus at the time was performance.

More information

See the 3.0 Release Announcement for more details. If you want to delve deeper into Vite, you can read a specialist article published by heise Developer, in which an experienced Vite user explains the tool. A version updated to Vite 3 will appear in an iX Developer special issue on modern programming languages ​​that is currently being prepared.

JavaScript developers willing to switch will find a migration guide on the Vite website, and those who are already deep into working with Vite.js can go through the changelog for a complete overview of all new features and changes.