In the last article, we walked through the benefits of writing your own HTTP server in Node. Now, we're going to walk through why you should consider adding Vite as middleware to your HTTP server, and how to do it.

What is Vite?

Simply put, Vite is a wonderful alternative to webpack. It was designed to remove the bundling process from the development process, increasing the speed of the feedback loop. For small projects, the speed gained is not very noticeable; but for larger projects, the speed gain feels exponential. Vite leverages new advancements in the ecosystem. With the availability of native ES modules in the browser, and JavaScript tools written in compile-to-native languages, Vite is able to bypass the bottleneck created by needing to crawl each file and concatanate them into bundles before spinning up the local server.

From Vite's website:

Vite improves the dev server start time by first dividing the modules in an application into two categories: dependencies and source code. Dependencies are mostly plain JavaScript that do not change often during development. Some large dependencies (e.g. component libraries with hundreds of modules) are also quite expensive to process. Dependencies may also be shipped in various module formats (e.g. ESM or CommonJS).

Vite pre-bundles dependencies using esbuild. esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers.

Source code often contains non-plain JavaScript that needs transforming (e.g. JSX, CSS or Vue/Svelte components), and will be edited very often. Also, not all source code needs to be loaded at the same time (e.g. with route-based code-splitting).

Vite serves source code over native ESM. This is essentially letting the browser take over part of the job of a bundler: Vite only needs to transform and serve source code on demand, as the browser requests it. Code behind conditional dynamic imports is only processed if actually used on the current screen.

But why should I add it as middleware?

Okay, how do we add it?

Conclusion