Converting to Vite (Part 1)

This is Part 1 of a series about how recently in Open Sauced, we converted the project from using Webpack v4 to using Vite! A lot of what we'll cover in this series deals with PR #1322. @bdougieyo started this as a create-react-app project 5+ years ago and so this conversion certainly turned out to be an undertaking!

You can read in many different places about the benefits of using Vite for tooling, as well as how it works under the hood, but we can unequivocally tell you that it significantly improved on the build times for our project. My fellow contributor @0vortex spent plenty of time with this PR, and he observed going from build times with Webpack around 220 seconds, to full build times with Vite around 9 seconds (and hot module reloads measured in milliseconds at worst).

So how did we get here? Well, it's a good thing to describe alternatives considered when you add issues to a repo! Months ago, @0vortex described in Issue #1131 some opportunities for dependency updates that would require version 5 of webpack with our webpack configuration, and warned that the dependency management would probably be tricky. I fixated on an alternative that he mentioned about converting the project to use Snowpack. I had wanted to learn more about bundling tools, so I took a few days here and there after Thanksgiving and got Open Sauced mostly working with it (see PR #1320).

@bdougieyo looked over that PR on stream, and pointed out that there was a lot more momentum recently with Vite as opposed to Snowpack. He pointed out that Astro was changing from using Snowpack to Vite for bundling, and that these were the same folks responsible for Snowpack.

As it turned out, the conversion steps for getting our project working with Vite were pretty similar to those for Snowpack, so I managed to get a branch mostly working with Vite in about 25 minutes while the stream was still going. Little did I know, there was still plenty to be done!

In Part 2 of this series, I'll talk about some of the snags and learnings we had with the conversion, and in Parts 3 and 4, I'll talk about some of the ways the scope for this PR grew.

Cover Image by Anders Jildén on Unsplash