We migrated our web app’s codebase from to for one simple reason: speed. Webpack 4 Vite Since Vite is relatively new, we can share that it’s stable and has made a tremendous difference in our lives as developers. Plus, the move was straightforward and didn’t take long—though our team here at Swimm learned some hard lessons along the way. Here’s a bit more about why we made the switch in the first place. What is Vite? Vite is a Javascript build tool designed for speed. Vite consists of two major parts: a dev server that uses native ES modules that makes Hot Module Replacement incredibly faster, and a build command that uses Rollup behind the scenes. Why we decided to migrate from Webpack We used Webpack 4 at Swimm for over two years as it’s used in Vue CLI, which is the service we use for our app’s client side. But about six months ago, we decided we needed to change when Webpack slowed us down as our codebase expanded and became more complex. Though Webpack 5 has been available for a couple of years, migrating Vue CLI from v4 to v5 that made the migration quite challenging. introduced several breaking changes Webpack’s performance was a deal breaker Webpack’s Hot Module Replacement (HMR) works well until you have too many files in your codebase. As our web app became larger and larger and we had many files in the codebase, it made HMR so slow it would sometimes break. Launching Webpack for local development took upwards of two minutes at best. HMR in Webpack took about 10 seconds. Moving from Webpack to Vite: the challenges The entire move to Vite took just a couple of days. Most of the work was done in one day by four devs, with some pre-work done in the days prior. While we were able to migrate quickly, we had to overcome some technical difficulties right off the bat. Project separation First off, our codebase needed some restructuring. in addition to the web app including and Swimm’s , and Webpack’s configuration was relevant for most of them. Because Vite is intended for web projects, we had to extract the shared code between the projects so that the web app would be isolated and independent. Swimm has several projects IDE plugins GitHub app Environment variables and configuration files Second, we had to clean up our environment variables and config files including tokens, URLs, and .env files. In particular, our TypeScript and eslint configuration had to be readjusted. Also, environments in Vite are handled very differently than in Webpack. Specifically, Vite has its own set of defaults and a new namespace. We imagine that other dev teams, like us, will need to go through extensive migration and configuration change work to work within Vite’s environmental expectations. Using Swimm to Migrate to Vite There were many code changes during the process of migrating from Webpack to Vite. No surprises there. And since all of our , this meant that we were able to ensure that our docs stayed up to date, current, and relevant. And, of course, we had a place to put all of the items we didn’t want to forget about the migration. code is documented in Swimm So, in addition to the Swimm documentation connected to the code changes, we also now have a “How We Use Vite doc” for our team at Swimm to read and use as we continue to ease into the migration. Moving to Vite: the easy wins Once the challenges for the migration were behind us, we saw the Vite wins immediately. Speed No matter how big the project size is in development mode, it doesn't impact Vite’s speed. Vite launches in less than one second (~700 milliseconds). HMR in Vite takes less than one second. Native integrations and efficiency Vite was written by the same developers as Vue, so we gained from a lot of the native integrations and synergies between the two. Vite also uses and doesn’t require bundling in pre-production environments, which makes local development so fast. It’s orders of magnitude faster than using Webpack. Also, Vite only supports modern browsers, so there’s no additional code to support legacy browsers many dev teams aren’t using. esbuild But you don’t have to use Vue with Vite. Vite is completely separate so you can use it with React, Angular, and others however they best fit your project needs. Vite also has a lot of and many more community plugins. official plugins Other technical details when migrating from Webpack to Vite A few other points to keep in mind if you’re considering migrating from Webpack to Vite: . Unlike Webpack 4 and earlier versions, you don’t get any automatic shims or polyfills for Node.JS modules with Vite. So, support for older mixed Node.JS/Browser modules can be a bit difficult. You can’t easily import anything and just expect it to work. And if you have some legacy Node.JS module that’s mission-critical, it will present challenges you’ll need to consider. Shims and Polyfills . When it comes to bundling, Vite is a general solution that does things a little differently. It’s not just a file watcher, web server, and bundler; it does on-demand compilation. As a browser requests updated JS files, Vite delivers them live and just in time. It’s super fast because of esbuild. There’s no need for complicated bundler solutions, and it only replaces the changed file via HMR. Bundling . Project configuration is also something to watch out for. We had all sorts of issues with templates and had to go deep into the documentation. We recommend you stick to configuration defaults and templates if you can and only change the configuration if you know what you’re doing. Project configuration Bottom Line Migrating from Webpack to Vite was well worth it, and we are very happy with the results. The migration from Webpack to Vite may present some challenges if your code repository has shared resources and dependencies across projects. But if your code is well isolated and independent, you’ll hopefully have an easy time with it. We think the migration to Vite is well worth the investment if Webpack has slowed you down. Also Published here

Webpack to Vite: Improving Speed and Performance

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Avoid Git Disasters (Gitstasters) Part 1: Git Reset

125 Stories To Learn How To Do X

3 Easy Ways to Share Your Location on an iPhone

$200 Solar Self-sufficiency — Without your Landlord Noticing

3 secrets for marketing agency to make a partnership with ICO projects.

3 Ways to Become a Better Technical Writing Manager

How to Avoid Git Disasters (Gitstasters) Part 1: Git Reset

125 Stories To Learn How To Do X

3 Easy Ways to Share Your Location on an iPhone

$200 Solar Self-sufficiency — Without your Landlord Noticing

3 secrets for marketing agency to make a partnership with ICO projects.

3 Ways to Become a Better Technical Writing Manager

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps