Last year I did a few things focusing on increasing the performance of JavaScript development. Well, to be honest, I did a lot of things, I talked about Storybook, I presented about Rusty tools, I ran a comparison of Next.js 11 vs 12 and I was very excited about React 18 and Turbopack.
This year, I'm carrying on with that theme, but I'm going to start with taking a look at things slightly further away from the comfortable React gravity well. The first thing I wanted to take a look at, was Vite.
I wasn't initially excited about Vite, I mean I was excited about the idea of a faster dev server, but I wasn't a fan of Vue. Sebastian on the other hand was very excited about it, and he was right, Vite is awesome.
Vite is a build tool that uses ES modules to deliver super-fast performance. It uses a lot of the fancy new JS features that browsers now support making it faster yet somehow lighter than Webpack. Vite is also, more importantly, not limited to Vue, it can be used with React, Svelte, Angular, and more.
So let's dive in.
What is Vite?
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It is built on top of the native ES module system and leverages the browser's native support for importing unbundled modules during development. It also comes with a dev server that provides rich feature enhancements, such as module hot-replacement, dependency pre-bundling, and production-optimized builds.
What does that mean?
That's a lot of long words in there, but what does it mean?
The Bundler Problem
Well, Vite is a build tool, but it's not a bundler. History lesson: most modern browsers had added support for ES modules by 2018, but they were not widely used because they were not supported by older browsers like Internet Explorer. This meant that we had to bundle our code to support the lowest common denominator.
Vite took a look at this weirdness and said "To hell with old browsers, if we only support modern browsers then we don't need to bundle our code, we can just use the browser to load our code, and we can use the browser to load our code faster than we can bundle it"
The Dev Server Problem
Why does updating a file during development take so long to update the browser when using webpack? Well, webpack has to bundle your code, and then it has to reload the page. That process is pretty fast when you have small projects, but when you have large projects, it can take a while.
Vite skips the bundling step and instead uses the browser's native support for ES modules to load your code. The end result is that your code is loaded faster, and your changes are reflected in the browser faster.
Too fast in some cases, there are times I wasn't even sure anything had changed, but that's a good problem to have.
Are there any downsides?
Well as I said before, Vite only targets modern browsers, so if you are targeting older browsers, Vite is not for you. Vite also uses different tools for dev and production, i.e. esbuild for dev and Rollup for production. This means that your code will be compiled differently in dev and production, which can lead to some unexpected behavior or in rare cases hair-loss inducing bugs.
Ok, I want to use it but can I use Vite with x?
Much like webpack Vite is extensible and has an impressive number of plugins already.
- Want EsLint and StandardJS in your project? No problem, there are plugins for that.
- Want to use TypeScript and css modules? They are supported by default.
- Want to use Storybook and sass? There are plugins for that too.
- Do you have a grudge against Esbuild/Go and want a shiny Rusty tool in your life? Vite + SWC is a thing.
There are so many things you can do with Vite, and the list seems to be growing daily.
Conclusion
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It is built on top of the native ES module system and leverages the browser's native support for importing unbundled modules during development. It also comes with a dev server that provides rich feature enhancements over native ES module support in the browser, such as module hot-replacement, dependency pre-bundling, and production-optimized builds.
Vite is awesome, but is it the prophesized Webpack killer we've all been waiting for? Probably not, I personally think Turbopack has that honor. But I do see a future where Vite works with Turbopack to provide a better development experience, and that's a future I think we can all get behind.
Reading a high-level post about Vite is nice and all but I’m sure you would love to actually see it in action right? We got you, we have a Teapot Tech Talk that builds that React Calculator but this time using Vite.
