Vite 5.0 is here

Vite has been with us for around 3 years. It was created by in Evan You 2021. He's also the creator of Vue, and whilst you might not want to use Vue yourself, Vite can be used with React, Preact, Lit, Svelte or Vanilla JS.

Vite is a bundler, similar to Webpack, Parcel and Rollup. It acutally uses Rollup under the hood. But Vite is faster and has much less bloat that Webpack.

Another one of the advantages of Vite over other dev tools is its use of Hot Module Replacement (HMR) to give that fast feedback loop when you're speeding ahead with your code dev. It speeds up Typescript as it skips type-checking and uses ESBuild to transpile your dev code.

Vite 5 new features

Switching away from commonJS to ESM

If you're using libraries like Jest, Tailwind or any other package that has a CommonJS export configurations then you'll have to update your config files to work with the ESM format. Everything is moving to ESM so this is a good chance to get onboard with the new ESM movement

Rollup 4

Vite had used Rollup in the background since the start, and Vite 5 is using Rollup 4 which is going to improve performance. That's also going to offer new options to improve your dev server performance profile.

What it takes to upgrade to Vite 5

  • Vite 5 supports Node 18+ which is where we all need to be.
  • config files with module.export need to be converted over to ESM standards. This it going to be a great move as previously CommonJS standards were great, but personally I experienced issue with some conflicts using more specialist packages that would be incompatible with other requests.

Who's embracing Vite now?

Astro, Nuxt SvelteKit and Solid Start have supported Vite for a while, but recently Remix and RedwoodJS have switched to Vite, and this paves the way for more React based ecosystems to follow this trend.

What about Vitest?

When I started using Vitest, there was a certain amount of disappointment that I couldn't use Testing Library alongside it. But Vitest is now an option alongside Jest for Vue Testing Library. And I'm enjoying the speed that Vite is helping to process my unit tests. Previously I'd get to a point where I'd have to switch to testing changes only to run a decent feedback loop without my IDE stalling, but with Vitest I can just run it in real-time and pick up any issue as I'm writing new code.

Is Vite just for Node?

The discussion about which runtime is best is something for another article, but Vite is supported by Node, Deno and Bun. So whatever you choose, it's going to work.

What's the future for Vite?

At ViteConf, Evan You unveiled Vite's long-term plan to work on Rolldown a Rust-port of Rollup with compatible APIs. The plan is to use Rolldown in Vite Core to take on the tasks of both Rollup and esbuild. This will mean a boost in build performance. Rust is becoming the go to for tooling with NextJs already using it with their TurboPack bundler.

All articles are my own thoughts. Gathered from reading articles and trying things out.