140: Evan You - Reimagining the Modern Dev Server with Vite

In this episode of Fullstack Radio, I talked to Evan Yu about Vite, a new dev server and build tool for modern JavaScript projects. This is Fullstack Radio episode 140. So the reason I wanted to have you on this show, I think I've had you on, like, three times or something. But recently, you, kind of have been working on and released early versions of a new I guess you'd call it, like, a build tool slash development server, called Vite. Yep. So what what's kind of the story? Yeah. Yeah. Yeah. It's funny. I was I was having trouble finding a good term to describe what it is. So, essentially, it's it's a combination of a dev server plus a build step. So I don't really know how to define that because, I guess, like, there are some similar projects in the ecosystem, like, something some projects are just a dev server. Some projects are just a bundler, like roll up. Mhmm. And some projects are more, like, all in one, like Parcel. But Parcel is still, like, built on top of the concept of a bundler. And, so Vite, the the core premise is, I think bundling, should is unnecessary or should be done as little as possible during development. And and the idea actually came up a long time ago of, like, more than a year ago. So before I started working on v three, actually, I realized, oh, you can use, style type equals module in modern browsers now. Right? So we have the ability to use native ES module imports directly in the browser. So why are we still trying to use a bundler to analyze these import statements and trying to stitch all the files together when the browser can just, you know, parse this and import them, as spec. So then I have the idea, okay, so if you have a local dev server that when you have a dev server, you can intercept all these HTTP requests to the server, right? So you get to do anything with them. You can even if you get a request for a non JS file, you can transform it into a JS file and send it back as a JS file. Yeah. And the browser is fine with that. Right? So that leads me to the idea of what if I can just, like, compile a Vue file on the server and send it back as plain JS. So that led to a project called Vue Dev Server, which is now archived, but that was essentially the first proof of concept for what it later on turned into Vite. Right? So that was actually a working working version a of a native ES import based dev server that allows you to just import a Vue file in the browser, and it'll just return the compiled Vue component directly. And that worked out really well. Right? And the big you know, in terms of development …