Why we switched from Webpack to Vite

image

Replit’s mission is to make programming more accessible. We give people free cloud computing so they can build apps on any device. One of the most popular ways to build applications on the Internet today is React. However, historically React tools have been slow on Replit. While the JavaScript ecosystem has created great tools for professional developers, many of the most popular ones, such as Create React App and Webpack, are becoming increasingly complex and inefficient.

Luckily, we’ve seen the JavaScript community grasp this challenge and move on to building faster, more efficient tools, which means we can finally deliver the experience our users have come to expect from us.

This new experience is based on Vite, a JavaScript build tool that enables fast and cost-effective development. Vite comes with a number of features including HMR or Hot Module Replacement, a build command that combines your tools with Rollup, and built-in support for TypeScript and JSX.

Vite speeds up development with React. It speeds up a lot. With HMR, the changes you make are rendered in milliseconds, dramatically speeding up UI prototyping. With that in mind, we decided to rewrite our React template using Vite and were shocked to see how much faster it got. This is how it looks compared to our old CRA template:

Over the past few weeks, our new React template has helped our designers prototype complex UI components and have enabled many of our engineering candidates to create an entire web application in just a few hours on our (virtual) sites. When you see this in action, it’s easy to see why:

image

How it works

Vite works by treating your source code and your dependencies differently. Unlike your source code, dependencies don’t change as often during development. Vite takes advantage of this fact by pre-linking your dependencies with esbuild… Esbuild is a JS builder written in Go that bundles dependencies 10 to 100 times faster than JavaScript-based alternatives like Webpack and Parcel.

It then serves up your source code through its own ES modules or ESM, which allows the browser to handle the actual bundle.

Finally, Vite supports HMR, which ensures that when you edit a file, only the relevant modules are replaced, rather than rebuilding the entire bundle, which causes a page reload and resets the state. Unlike other builders, Vite does HMR on its own ES modules, which means it only needs to invalidate the affected modules when editing the file. This ensures that update times are consistently fast and not scale linearly as your application grows.

Let’s start

To get started, just fork our React template or select React.js from the dropdown when building new replay

Vite is also framework agnostic, so if you don’t like React, you can also use our templates. Vue and Vanilla js

We hope this will help you bring your ideas to life even faster, and we look forward to seeing what you create!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *