Rustifying Vite: Designing a Hybrid Toolchain for the Real World

So let's get started. So, we've got a lot of options here for pre-bundling, for transformation, for minification, rollup, bundling, the plug-in system, all of your favorite frameworks' plug-in are rollup plug-ins to some degree as well, and also very limited chunk control. And then for the React folks here, there was also SWC that you could use as an alternative for transforms, for React fast refresh, etc. But the problem is, well, these are three tools together in one bigger build tool. This already sounds like pain, right? So at some point we thought, why not unifying this whole layer, the underlying bundler layer? And that meant the following. We take this, we take it all away, switch the logo because that happened in V8 eventually, and then there is rolldown, one bundler through them all. So you're like, why is there another bundler? Why can't we use one of these that exists already, or like TurboPack or what Tobias talked about earlier, or Webpack, etc.? Well, it's complicated. Right? But first of all, multiple bundlers under the hood, of course, complexity. It's a big problem for the V8 maintainers, the contributors, but also the developers because it introduces inconsistencies between development and between production, which sucks.

Then there's also limitations. Some bundlers say, oh, we don't implement A, B, C, so neither rollup nor A is built. Wanted to introduce certain features because they said, hey, it's out of scope. And it's fine, but these are features V8 and maybe all you need. And then of course, time. Right? We also know back in the days that Webpack times would take a long time. And now builds are faster, but they could be even faster now.

So of course, what do we do? We read everything at Rust. We are 10x developers. Let's go. Jokes aside, time to meet Roldown. And yes, that just rolled down on purpose. So Roldown itself is bored and just like, hey, let's take rollup and port it to Rust because it's not that easy. Instead, we decided to combine the best parts that we have of prior art. So rollup's API, all the plugins are still compatible. Right? Very important, so you don't really have to migrate things away and over. It would be like a huge churn for everybody.

Speed and also behavior for me is built. Right? Things like inject, define, et cetera. And also we inspired, we got inspired by Webpack to have some more advanced chunking. So you can make sure your JavaScript applications are as performant as possible. You can split it up in files as needed. And there's also more, of course. More features like module types, lazy barrel optimization, built-in HMR, input map generation, et cetera, et cetera, et cetera. There's a lot. And also, of course, there's built-in minifier and transformer. So you can have syntax lowering, or your TypeScript is being transferred over to JavaScript and your code is minified. So you have a very performant bundle in the end. So that's what rolldown can do. But also, yeah, it feels a bit strange, right? Wake up, there's another Rust rewrite.

Well, it's not banned at least. So what we can do here and why we did it in the end is we want to make sure that the Rust-based bundler also works well with the JavaScript ecosystem. How we did this is we added a few more leverages for plugin authors. And one of the things is hook filters for plugins. So plugins work as they are, but then you have to call the JavaScript plugin for each file for each check, and that's a bit meh, right? So instead, we said, look, let's say we have this very simple rolldown or rollup plugin. They're incompatible, right? They're compatible. So let's create a new framework called Swangular. And we just say, OK, transform something. If the ID doesn't end with Swangular, then return. And otherwise do some actual transformation. Yeah, Swangular is a great name, I know. But the problem is this transform function is called for every single file, and that's a lot of files, I tell you, in your Node modules.

So instead, what we do is, well, we take this, but we extract it into a filter function to say, OK, just run this if ID includes Swangular. And now this can also be parsed by Rust so Rust doesn't have to call it all the time and say, OK, only for these conditions, and we're good. And that's the magic behind it. So lower overheads, and it works in rolldown, read, and even in rollup. Yeah, it's important everywhere, right? And if it's not there, it's fine. It will just be ignored. Also, feed's got, well, Rustified, of course, so native Rust plugins are covered. Things like module resolution, yeah, finding all of these aliases, et cetera, et cetera. TypeScript JSX transform, just mentioned it before.

Defined replacements, right? Like nodes n, for example. Import metaglob, if you need a certain expression, therefore. All dynamic import variables, so things like import pages and then the name, .js or with the template syntax here. So and that's not the end, of course. We did it with the bundler. We have the underlying, well, minifier, transformer, etc. And based on that, we have a linter and a formatter. All of that together, you can actually use in a tool chain called V+. But that's time for another talk. And that's all about it. Thank you for your attention. Thanks, everybody. Bye-bye. Thanks, everyone.