Mike Rockétt

It wasn’t that long ago (relatively speaking anyway) that Grunt and Gulp were the tools-of-the-block for bundling assets using the task-runner approach. These tools were powerful for their time, but were far from easy to set up.

Then came the craze of next-gen ECMAScript: ES6 (or ES2015) was the JavaScript eveyone wanted, but no browser could run. Before we knew it, the Gulps of the world gave way to Webpack+Babel, giving us the ability to transpile modern code into something any browser could understand. At the beginning, these tools were also pretty difficult to use (config upon config upon config), though they matured over time and framework-specific wrappers emerged to help simplify the process. For Vue JS, we got Vue CLI. For React, we got, well, I actually don’t know – never been a React developer, and probably never will.

Even with these modern tools in play, we still landed up with massive node_modules directories, filled with packages that didn’t emit tree-shake-friendly modules. We landed up with production bundles the size of skyscrapers, and had to do a lot of work to reduce their size. All in all, the tools worked, and still do, but they don’t give optimal results, most of the time.

But, it’s not 2015 anymore. Nor is is 2018. The browser can do it all these days – they’ve finally caught up, and can run modern ES modules natively without much transpilation.

That doesn’t mean we don’t need a build-tool though. Something still needs to step in and logically organize everything, and provide out-of-the-box support for hot module replacement (new hot reloading) and dynamic, chunked imports. We also need something to transpile only when we need it – think of bleeding edge, experimental language features that we’d still need Babel for.

Enter late-2020/early-2021, and the creator of Vue JS (Evan You) created Vite, a lightning fast build tool that finally makes ESM a first-class citizen. When I say lightning fast, I mean it. Spinning up a dev-server in Vite is practically instant, as any typical HTTP server should be, and building production-ready bundles take far less time than they would with Webpack+Babel+all of the things.

Beynond the obvious speed improvements, Vite takes it several steps further by making it all framework-agnostic. That’s right, you can serve and build any JS app with Vite. Whilst first-class support is there for Vue, React, Preact, and Lit Element, Vite uses a plugin-based architecture – this tears down the walls and allows any framework, or even vanilla JS, to benefit from this super-fast tool chain.

Vite wouldn’t be the first, though. There are kids on the block, and they all do things a little differently. Snowpack is one of the most well-known in this ‘sphere’ of tool-chains, and Vite borrows some of its approaches before expanding on them.

Where Vite excels is in its approach. It was originally designed to be the future build tool for Vue, exclusively, but once it became framework-agnostic and implemented a plugin-based approach, it opened a bunch of doors that would otherwise stay closed (probably). It has SSR support (experimental at the time of writing), and introduces a new concept called Backend Integration, which is great for a stack like Laravel+Inertia – this easily replaces Laravel Mix, and provides a seamless end-to-end experience.

The nice thing about these ESM-based build tools is that there’s more of them, and one might suit a team’s build process more than the other. Perhaps it’s safe to say: gone are the days where Webpack prevails as the only real build tool that makes sense. We can finally break free and build modern, browser-friendly code, and not wait for what feels like an eternity to build a relatively large app with 5000+ modules.

I’m super keen to see where this all goes, and what the future of our tool-chains looks like. If anything, Vite, Snowpack and friends have already jolted us in a new direction, one that could well be around for years to come.

Vite Resources

• Guide
• DEV Community
• Awesome Vite