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:
How it works
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.