By Janakiram Msv,Richard MacManus
Copyright thenewstack
Vite, created by Evan You, has become the go-to build tool for modern frontend frameworks, including Vue, SvelteKit, Astro, and React — with experimental support also from Remix and Angular. This all happened within the space of five years! That story will be told in an upcoming documentary film by CultRepo, due for release on Oct. 9.
In advance of the Vite documentary’s release, I spoke to Evan You about the evolution of Vite, the incredible momentum it has built, and what’s next.
The Genesis of Vite: From Webpack to ES Modules
The origins of Vite come from You’s dissatisfaction with the industry’s default build tool in 2020, Webpack. His framework Vue.js had been available at that point for around six years, so it was a stable technology. He began thinking of improving the build process. In his words, he wanted “a lighter-weight development experience where things should update faster.”
The key, it turned out, was a relatively new feature of JavaScript called ES Modules (ECMAScript Modules). ES Modules were standardized in 2015, as part of the sixth edition of ECMAScript (ES6). But it took until 2018 for it to be broadly supported in browsers and 2019 before Node.js support arrived.
The maturation of ES Modules coincided with You pondering a new build system in Vue.
“So, ES modules are how you would break up JavaScript code into different pieces, different modules that you can load,” You explained. “But until browsers supported [it] natively, you always had to bundle it together — make it something that can run in the browsers.”
This is why Webpack was the dominant build tool for web frameworks up till this current decade. Webpack is an open source module bundler for JavaScript that was launched in February 2014 — coincidentally, the same month and year as Vue. But with the emergence of ES Modules, the bundling part could now be done natively, in the browser.
The maturation of ES Modules coincided with You pondering a new build system in Vue.
“I was playing around with it [ES Modules], I liked it, and I was like: look, if we can send a request to load a module, but the server will just compile, say, a Vue component or a TypeScript file — on the fly — turn it into JavaScript, and send it back…the model will be really simple. So that’s how I started working on Vite.”
In other words, no need for bundling! Each module would be compiled into JavaScript in real-time, as and when needed. At this point, 2019, the product was called Vue Dev Server.
The First Version of Vite and the HMR Epiphany
But for an ES Modules-based system to replace Webpack, it had to do hot module replacement (HMR) as well. HMR allows parts of a web application — individual modules — to be updated in the browser without a full page reload. It was perhaps the most impressive innovation in Webpack and became a boon to developers because it meant they didn’t have to reload their entire app after each code change.
“I was like, hey, I have an idea to make hot module replacement work over Vue Dev Server. And that became the first prototype of Vite.”
– Evan You, Vite creator
According to You, figuring out HMR was the most important part of getting his new model to work.
“So Vite went through a few different incarnations. The first one was a prototype called Vue Dev Server — that was in 2019, I believe. So it was a prototype, [then] I put it aside for a while. In 2020, I actually had this epiphany. I was like, hey, I have an idea to make hot module replacement work over Vue Dev Server. And that became the first prototype — and eventually became the first iteration — of Vite.”
He did an all-nighter to code his epiphany up, then on the morning of 20 April 2020 his time, made this now famous tweet:
This “no-bundler dev setup” with blazing fast hot reload certainly caught the attention of Vue developers. But You soon realized that while this was a great solution for a dev server, when it came to production a bundler was still required — so that a developer could optimize their code before deployment.
You concluded that he needed “a universal plugin system that can work on both Dev and Prod.” He earmarked Rollup, created in 2015 by Rich Harris (who later went on to create the Svelte framework), as the production bundler he intended to use for Vite. Then he noticed that a project called wMR, from the Preact ecosystem, had something called a “Rollup plugin container.”
“So the plugin container concept allowed Rollup plugins to just work, right, without Rollup itself — which we can put into the dev server. So that essentially led us to rethink how it [Vite] should be architectured. So I actually decided to just rewrite Vite from the ground up again, before the 1.0 release.”
Vite 2.0: A Framework-Agnostic Build Tool
So Vite 1.0 never actually happened; it was straight on to Vite 2.0, which was designed to be framework agnostic. Vite 2.0 eventually launched in February 2021, including the plugin system inspired by Rollup to replace Vue-specific technology. It brought HMR over ES Modules to all frameworks.
“Vite is a layer that’s on top of bundlers. It’s not just a bundler. We call it a build tool…”
It’s worth pointing out here that while Rollup (and Webpack) is what You terms a “low-level bundler,” Vite 2.0 is a step above that.
“Vite is a layer that’s on top of bundlers,” You explained. “It’s not just a bundler. We call it a build tool, because it does more than bundling — it has built-in concepts or APIs that make it easier for you to build meta-frameworks on top of it.”
So, with Vite 2.0, it suddenly became attractive to all different kinds of web frameworks.
In the documentary (I saw a screener), you see various other framework creators explain how they came to adopt Vite 2.0 — including Svelte’s Rich Harris, Astro’s Fred K. Schott, Solid’s Ryan Carniato, and Pedro Cattori and Mark Dalgleish from Remix.
Even Angular creator Miško Hevery pops up to sing Vite’s praises (while it’s not yet the default, Angular supports Vite through official CLI integrations). Hevery’s latest framework, Qwik, chose Vite as its underlying dev server and bundler. “I’m super happy for them and I think they should take over the world,” he says in the documentary.
The film does a great job of unpacking (so to speak) how most of the popular frameworks of today gravitated to Vite. Fred Schott’s story is especially compelling because he directly competed with Evan You with his own build tool, Snowpack. Schott’s tool, which also used ES Modules, actually predated Vite. We know who won that battle, but out of the ashes of Snowpack came Astro — which launched in 2021 and is now one of the trendiest web frameworks. In the film, Schott notes that he migrated Astro to Vite for the dev server and bundling in mid-2022.
Vite’s Widespread Adoption in the React Ecosystem
Perhaps most surprisingly, many React developers started using Vite 2.0.
“So we shipped Vite 2, and interestingly, a lot of React developers started using it to replace Create React App, which was the default starting point,” said You.
Not all React developers jumped to Vite, though. The exception to Vite adoption among the main frontend frameworks is Next.js, which has continued to use Webpack as its default build tool since launching in 2016. But Next.js is also working on a new-generation tool called Turbopack, a Rust-based bundler created by Tobias Koppers, the creator of Webpack.
“It’s not usable outside of Next.js, so in a way Turbopack is now really more like an internal implementation detail of Next.js…”
– You on Turbopack, the build tool of Next.js
I asked You how he compares Turbopack to Vite.
“Turbopack is still not, like, completely stable up to this point,” he replied. “They originally wanted Turbopack to be a standalone thing, that you can use to build on top of it. But due […] to how difficult it is to just get it working in Next.js, up to this point it’s still really, really tightly coupled to Next.js. It’s not usable outside of Next.js, so in a way Turbopack is now really more like an internal implementation detail of Next.js, rather than a standalone tool that you can use.”
Vite, on the other hand, can not only be a standalone tool, it can also be what You calls a “foundational layer” for different frameworks.
“We are a build layer [where] you can use Vite directly to build a single page application; but you can also build a custom meta-framework on top of Vite, using Vite as the foundation layer. And that is exactly what, you know, Sveltekit, TanStack, [Solid]Start, Remix are doing.”
“Most of these vibe coding platforms, we see they default to a Vite plus React stack…”
Also, according to You, the Vite and React combo has become a default approach for AI coding platforms.
“Most of these vibe coding platforms, we see they default to a Vite plus React stack, because that is probably the most well-understood combination by AI at this point.”
Vite+: The Future of the Vite Toolchain
Last October, You founded VoidZero Inc., a company focused on building a “unified development toolchain for the JavaScript ecosystem.” In the announcement post, he noted that Vite has “clearly established itself as the shared infrastructure layer for the next generation of web frameworks.” This has given a foundation for You and his team to build a business on top of Vite.
In June this year, You announced at a conference that VoidZero is working on something called Vite+, which will be an end-to-end toolchain for Vite. I asked You to explain the concept a bit more and update us on progress.
“Vite+ is a unified layer that put all these things together under one coherent solution, right? So it is a drop-in superset of Vite itself.”
He firstly explained that his company is working on several different open source projects. These include Rolldown (a new Rust-based bundler for Vite), Oxlint (a Rust-powered linter for JavaScript and TypeScript), Vitest (a Vite-native testing framework) and Oxc (a collection of JavaScript tools written in Rust).
“Vite+ is a unified layer that put all these things together under one coherent solution, right? So it is a drop-in superset of Vite itself.”
Vite+ also has “additional features that are only in Vite+,” he said. “We want to essentially offer this to companies that have been struggling with fragmented tooling across the organization.”
And yes, there will be an AI component to Vite+.
“So we are also, in Vite+, thinking about potential AI-related improvements,” You said. “For example, there should be […] a prompt that we can give users to put into their agents.md, to make their agents work better with Vite+. There could be [an] MCP server that tells the agent that you can use this for more efficient code search across the code base, or understand the module relationship, or patch relationship in your code base. There should be AI-friendly documentation, there should also be AI-friendly command line output, right?”
Evan You has clearly become one of the rock stars of frontend development this decade. It’s remarkable how quickly Vite became the default build tool across most meta-frameworks, and now You is taking the frontend tooling unification theme up a notch with his own company.
Do check out the documentary when it is released on Oct. 9; it’s a fascinating watch. Here’s the trailer to whet your appetite
