In Praise of Vite
I consider myself a fairly capable developer. I even enjoy working with the infrastructure that powers our projects. I love setting up our design tokens, preprocessors, linters, and other tools that help us write better code. That said, there’s one thing that causes me to break into a sweat: configuring complex build tools like Webpack and Babel.
These tools, while undeniably powerful, are some of the most arcane and difficult to work with I’ve ever used. I’m sure there are people out there who are rolling their eyes at me, and find this stuff completely understandable. I’m happy for you! But I don’t think I’m alone in feeling this way.
Let me share an example Webpack config from a Nuxt project we maintain (feel free to just skim past this, I’m just making a point about complexity):
Believe it or not, that’s a relatively simple and well-documented config. We only needed to add a few things, and the devs who added them left helpful comments and links to documentation. Still, when something goes wrong? It’s a nightmare trying to figure out why and how to fix it.
What I want to rave about is what I consider the best feature of Vite. The thing that’s had the most dramatic impact on the way I work, and why it’s so useful to me. I want to talk about Vite’s simplicity.
Remember that “simple” Webpack config? Here’s the Vite config from the same project after we upgraded:
That’s it! That’s the whole thing! All the same features, but with only a single line of config to load a plugin to inline SVGs.
Compared to Webpack, Vite is delightfully easy to use. As an opinionated tool, it simply handles most of the things we need right out of the box. Your config file is likely to be minimal. In many cases, it’s only used to load plugins that help Vite understand how to process things like Vue single-file components or inlining SVGs. On several of my simpler side projects, there’s no config file at all!
At the most basic level, Vite only cares about your entry file — the
index.html file that lives at the root of your app. Any CSS or JS files you load from there will be processed by Vite.
- Want to use Sass? Install Sass with npm, and Vite will automatically process any Sass files you link to.
- How about PostCSS? No problem! Just add a PostCSS config file, and Vite will figure it out.
- Need to load some information from a JSON file? Can do! Vite allows you to directly import it into your JS file.
- TypeScript? You got it! Just use the
*.tsextension, and Vue will handle everything for you.
To do all these things in older projects using Webpack and Babel required a nightmare of configuration, plugins, and maintenance.
There are a lot of technical reasons why Vite is great. But for me, it removes the single most painful part of modern web development. At the end of the day, it just works. With very little instruction, it does everything I want. Load this file, process it as needed, and let me get back to writing code.
Scott Vandehey is a front-end architect and CSS specialist with over 20 years of experience. He curates Friday Front-End, sharing front-end development tips and links every day. He is the author of “How to Find a Better Job in Tech.” Follow him at @firstname.lastname@example.org.