This article explains what Vite is and briefly introduces you to bundling. Let's find the answer to whether it is worth departing from Webpack. I will focus on comparing Webpack with Vite, showing the advantages and disadvantages of both solutions. Let's roll.

What Is a Bundler?

A bundler is an indispensable tool in today's web development. It allows you to work comfortably with code in languages ​​not supported by the browser by default, such as Typescript or SCSS. It can also adapt our application to the production or development version. In the case of the development version, it will provide us with access to hot reloading of the page during changes and allow you to debug the code we wrote, thanks to source maps. In the case of the production version, the code will be optimized appropriately and unified, making the application work more efficiently.

Currently, the most common bundler is Webpack. Its popularity works to its advantage, as the community support around the tool is invaluable. Twenty-four million downloads per week from the NPM repository is an impressive sum. The market, however, does not like monopolists, so the new technology - Vite, is slowly being pushed forward. It tries to solve one of Webpack's problems, namely bundling time. In addition, it also has other exciting features to offer. Will the future be favorable for Vite?

Vite and Webpack - Fundamental Differences

Vite, as we learn on the official bundler website, means "fast" in French. From the very beginning, the creators suggest to us what they care most about, and this is the programmer's time. Web applications (when we used the definition of "website" are long gone ...) are getting increasingly ambitious and, therefore, more and more memory-consuming. Unfortunately, Webpack is very susceptible to bundle size because each change takes all our dependencies and all the source code and converts it into one enormous JavaScript file, which is then served to the server. As a result, creating such a bundle may take up to several minutes in extreme cases! Even using such benefits as Hot Module Replacement, reloading a page may take several seconds. It's still a lot.

At this point, it appears - all in white - Vite with a completely different approach to the problem. First, the server is created, and then the code is bundled. The important thing is that it uses esbuild for the bundling process itself. It is written in Go - a much more efficient language than the default JavaScript-based Webpack processing. Its creators boast that it can be 10 to 100 times faster!

And that's not all when it comes to accelerating development. By default, Vite divides the code into parts so that when you go to a given path, we do not download all dependencies at once but only those that are just needed. In addition, the creators suggest the pre-bundling mechanism performed on dependencies (mainly NPM modules), which are not often changed. Vite also uses native modules (ESM). That's it for the theory. Let's check it out in practice!

Assumptions For the Benchmarking Test

To compare Webpack with Vite, I created a frontend project based on the React library. The creators of React recommend using create-react-app, which is a ready-made script that creates a project structure based on a Webpack. It will be easy to use Webpack without having to configure it. In the case of Vite, I will use a template prepared by the creators, which includes a configuration ready to start working with React. Then I will add a few heavier libraries to the project and describe my observations regarding the comfort of the work.

Vite - Creating a Project

To create a React project with typescript based on bundler Vite, we use the following command (assuming we already have yarn installed):

1 yarn create Vite my-vue-app --template react-ts

And here is the first surprise. It took about 1 second to create the project! Unfortunately, the spell was broken a bit when it turned out that NPM modules were not installed immediately and had to be installed manually (yarn install command in the newly created project folder). The process of adding dependencies itself took about ... 5 seconds. How will Webpack handle create-react-app (CRA)?

Create React App - Creating a Project

The command to create a similar project (react + typescript) is:

1 yarn create react-app my-app --template typescript

The script for creating the project, i.e., create-react-app, took much longer to make. The process was more automated as all dependencies were installed right away. However, the process took about 40 seconds. The difference is significant, but let's not get ahead of the facts. The creation process is done only once. We will see what differences exist when working on the project itself.

Vite - Project Work

A clean project takes off in ... 200ms. It is due to the previously mentioned bundling mechanism only after loading the application. The application itself, however, also loads instantly. HMR (Hot Module Replacement) works great as the page reload time is almost negligible. But what happens if we add a couple of heavy packages to our project?

The packages I am going to add are:

• styled-components
• mantine
• threejs
• pixi.js
• moment
• gojs
• lodash
• d3
• monaco-editor
• HTML2Canvas

They are popular on NPM and are also not very light (cross-section from less than a megabyte to as much as thirty). There may be many more of them in an actual project, but considering the assumptions of Vite, even with such a number of dependencies, the difference in speed compared to Webpack should already be noticeable. Before I check the differences between a clean project and a project with added dependencies, I will quickly present the application.

It is very simple and contains predefined components from the previously mentioned libraries. You can find a link to the repository here. The component's content will be rendered by clicking on the appropriate button. So how does an application with so many dependencies behave?

The start itself has not changed. It makes the most sense because - as I mentioned before - only the server starts at startup without any bundling operation. Bundling itself takes place only when the application is launched in the browser. So how much do you have to wait between starting the application and seeing it? The application is loaded almost immediately! The whole process takes about a second which is impressive. How does hot reloading work? Any changes to the file containing all the components (App.tsx) cannot crush Vite, and reloading the page is negligible.

However, I noticed that Vite creates a cache folder, where it keeps a previously prepared bundle. Despite its removal, bundles are still made in a flash, and the difference is imperceptible. So let's see what's up with Webpack.

Create React App - Work On a Project

The start of a clean project takes a bit longer, about 7 seconds without a cache. HMR, as in the case of the Vite, is also lightning fast, which should not be a big surprise as nothing has been added to the project yet. So let's try to add the same libraries as for Vite.

Since CRA based on a typescript template is quite restrictive regarding the correctness of typescript code, some selected libraries require a little effort. By default, the CRA, unfortunately, does not allow any changes to the Webpack, so information about typescript errors that do not affect the operation of the application was still visible and could not be easily hidden. There are two solutions to this problem. The first (and more tedious) one is to fix the bugs by typing the code correctly. The second option is to put a comment on the first line of the problem file:

1 // @ts-nocheck

…which skips checking for typescript errors. Of course, I do not recommend this solution because typescript is usually designed to help developers, so errors are justified in most cases. So I decided to try the first option. Then I checked how fast the application starts and refreshes after changing the file (App.tsx), just like in the case of Vite.

App startup speed grew to around 21 seconds with no cache. The application started in about 5 seconds with the cache. On the other hand, the hot reload time comes to about half a second. Is that a lot? Considering that the hot reload in Vite is still unnoticeable, you could say it is quite a lot. Scalability, in this case, is of great importance, and despite the not-so-large number of parcels, the difference exists.

Vite - What Else Does It Have to Offer Besides Speed?

The creators also talk about the simplicity of configuration. Vite is utterly open to any modification through the plugin system. By default, it supports typescript, style loading, and hot reloading.

On the other hand, the CRA is a layer of abstraction over the Webpack. It is not done without purpose. We can get to the complete configuration with the command "yarn eject," but we get 700 lines of new code. While most are explained quite well in the comments, it can be overwhelming at first glance.

However, Vite does not have as many plugins as Webpack so far, so it may be an issue in some design situations. Despite being less popular than Webpack, Vite still has around one and a half million weekly downloads, growing reasonably quickly. In January this year, downloads were three times higher.

Is It Worth Departing from Webpack? Summary

Looking at these two apparent advantages of the Vite, i.e., its speed and simplicity, one could say - it's worth it. However, nothing is black and white, so take some time to consider.

It is suitable for prototyping applications and larger projects in which we have a lot of dependencies - the project should react to changes very quickly. In contrast, in the case of Webpack, it may be a problem. However, Vite is not a complete replacement for Webpack. In many projects that have dragged on for years, the configuration of the Webpack can be so complicated that trying to switch to Vite can prove problematic. Some NPM modules are closely related to Webpack. Vite is a very interesting option for developers starting their adventure with the front end and wanting to focus only on writing applications. CRA is also very friendly, but it is worth noting that it is a layer of abstraction above Webpack, and all its complex configuration is hidden from the developer.

Vite's fortunes depend on the community. If enough plugins that exist for Webpack are ported for Vite, many projects will be able to start migrating. In the absence of situations that can significantly delay product delivery (i.e., non-existent plugins and the need to write your time-consuming solutions), Vite can substantially improve work on projects. In any case, technology deserves attention, and its future is worth watching.