Intro to ViteJS

Rambling

There used to be a time when I would write JavaScript in multiple files. They might look something like this.

// start.js
(function () {

// multiple js files of code

// end.js
})();

// use a makefile to join them together

Then I would use a make file to run a script that just concatenated all those files together. I didn’t care much about minification or optimization. I don’t think I was alone here, I’m pretty sure I got this idea from an article way back when. I do remember writing Ant scripts when the project was a mix of JavaScript and Flash, that was fun.

If the project was big enough, there were tools like jsmin. If the project warranted it, I would use Dojo Toolkit, which could probably make me a sandwich if I wanted it to.

As a developer, no matter the language, build tools just come with the territory.

Ok, no more rambling

My point in all this is that if you’re not careful, build tools can get unweildy. This is where a tool like ViteJS comes in.

Vite is like a breath of fresh air. It handles ES modules natively, meaning that builds are super fast, because it just builds ESM, especially dev builds! Out of the box, you don’t even need a config file, it just works.

my vitejs config pic.twitter.com/q034T2ssvM

— Rene (Hecho En East Los) Rubalcava (@odoenet) August 18, 2021

Under the hood, Vite uses esbuild. For CSS, it can handle PostCSS if you add a config for it, or css-modules if you add .module.css files, or sass. It will also make liberal use of the import.meta to add some sugar methods like glob imports or adding environment variables. You can switch the build to use terser and get a slightly smaller build, but it is a little slower. In my regular usage, I don’t notice a huge difference, so I leave esbuild as default.

It handles JSON and wasm imports for you. Even workers can be loaded via import WorkIt from './workit?worker'. Just when you thought you could escape loader plugins, they drag you back in!

But I have some complex workflows, I use ejs templates, I need sprite sheet generation… I hear you. The great thing about Vite is that it uses rollup, so you can use rollup plugins if you want. It also has a suite of vite plugins available. Just add them to your vite.config.js and you’re good to go.

Most projects I don’t even need a config. It’s insane.

How to use it?

npm init vite@latest my-vite-app

When you run that command, you’ll be asked if you want a vanilla project or if you want react/preact/vue and even TypeScript. It’s really that simple and makes me smile.

Geez, I feel like this should be a longer blog post. But it really is that simple. Now, I wouldn’t try converting your large webpack application to Vite. Don’t get me wrong, webpack has a ton of plugins, loaders, community, and history.

I should note, I have had some issues in building third-party css where I need to modify the url imports, like I can with the resolve-url-loader for webpack, but that has been the only very specific issue I’ve run into.

Vite is another option, and one I think is great for new projects! In testing, I can get a smaller build with webpack, not much smaller, but smaller. So if squeezing every last kb out of your build is your goal, maybe webpack is your thing. You do you, and build awesome apps!

You can check out more info in this video below!