Vite === Fast

Lots of code - long wait times

Until now Limetta has worked exclusively in development environments based on Webpack and Node. It has worked well and we have for the most part been satisfied. However, we noticed that the bigger the projects became, the longer it took to start them and work on them. That's not surprising, since many files with a lot of code mean more work for transpilers and build scripts. More work means longer build times. We're still talking about time in terms of seconds, but 20 seconds is a long time when you're working in short iteration cycles, which is often the case in frontend projects.

Vite compared with Webpack

The problem with webpack-based build platforms is that they transpile and bundle (essentially) all code every time you save a file, even if the developer only changed a single module. The code is bundled (grouped together) into one or a few large files (chunks) which are then sent in their entirety to the browser. In the process the build platform also has to determine what should be bundled, so-called dependency resolving, which takes a lot of time.

Vite takes a different approach. No code is bundled while you develop. Instead, support for ESM (ECMAScript Modules) is built in from the start; this is the official standard for packaging JavaScript code into modules. ECMAScript modules have the major advantage that modern browsers understand their structure and can read the code to find out whether a given module in turn depends on other modules. So instead of serving a single large JavaScript file, Vite serves one or several small ECMAScript modules. If the browser detects that a module depends on another module it will automatically fetch that other module as well. This ultimately means that only the code the browser deems it needs is sent.

Vite's built-in development server receives all requests from the browser and makes sure to serve the files the browser wants. If there is code that must be transpiled before it can be sent to the browser, e.g. code written in TypeScript, SCSS or JSX, Vite ensures this is done before it sends a response back to the browser. The transpilation is handled by esbuild, which is extremely fast (more on esbuild below).

Newer versions of Node do have support for ESM, but Node has long also used another standard called CommonJS. Making CommonJS and ESM coexist in Node is very cumbersome and you risk spending more time fixing problems than on the project itself. Maybe this will work better in the future.

Vite also includes something called Hot Module Replacement (HMR). It means you can swap out parts of the code in an application running in the browser without having to reload the entire application. You can think of it as a digital equivalent to operating with local anesthesia, without having to put the patient to sleep. HMR also exists in Webpack, but there you have to bundle and replace much larger modules which affects performance. For the developer, Hot Module Replacement means the browser automatically. updates the view you're working on as soon as you save the code you've changed. When working in Vite the view updates immediately when you save the file.

Builds to production with Rollup

So far we have only talked about how Vite works while developing the application. But sooner or later you will want to build out all the code into a finished solution that you can put on a test server or deploy to production.

As we have touched on, Vite doesn't bundle anything but only serves ECMAScript modules. That's good while you're developing, but impractical and inefficient when you want to run the application live. So before launching an application you want to bundle all the code and at the same time take the opportunity to do a bunch of other things, for example transpile, compress and optimize code and split the code into different blocks (chunks). To do this, a bundler called Rollup has been brought in. It takes all the ECMAScript modules and bundles them into one or more larger files and can, via plugins, provide functionality for all the extra things you want to do in connection with bundling (compression, optimization, etc.)

Vite themselves say that Rollup is a solution chosen while waiting for esbuild to get better at bundling code. For example, esbuild cannot currently provide good CSS handling or code splitting into chunks. These parts do not work satisfactorily in esbuild today.

The future of Vite

In the frontend world platforms, tools and libraries are constantly replacing one another. Just when you've gotten used to one solution, a new, better and faster one appears. The build platform Grunt (2012) was replaced by Gulp (2013) and Webpack (2014). The first stable version of Vite was released in 2021.

Do you really dare to use a tool that hasn't even existed in a stable version for a year?

We ask ourselves that question every time something new appears. To answer it we use a number of indicators to determine whether it's something we should adopt or not:

• Are there real problems it would help solve?
• How does it fit with our way of working and our infrastructure?
• Who is behind it?
• How many others are using it?
• Is there good documentation?
• Are we satisfied with the results when we test it ourselves?

Behind Vite is Evan You, the creator of the JavaScript framework Vue. That's good both as a guarantee that the code is viable and that it will get wide adoption. Vite addresses something that is a real problem for us: speed in build jobs. It has around 400,000 downloads per week and 35,000 stars on GitHub and there is good documentation on vitejs.dev. Our initial tests show that it works as it should and we see significantly improved performance. All in all this means that Vite is something we should and ought to continue testing. Above all we are interested in seeing how it behaves in really large projects, something we will test during 2022.

At the same time we know there's an ongoing battle about who will be top dog. It's no bad guess that those in the Webpack camp are beginning to feel nipped at the heels by Vite and will hopefully prioritize performance in future development work. All of this is good for us and our customers. Competition drives development and enables us to deliver more efficient solutions with automation that executes quickly.

The conclusion is that regardless of who is biggest, best and most beautiful right now, everyone benefits from daring to explore new technology. Developers want to work in environments where they don't have to wait around for tedious build jobs and clients want us to use time optimally to solve their specific challenges. It will be really exciting to see how Vite develops going forward and Limetta is happy to be part of it!