Why use Vite when Bun is also a bundler? - Vite vs. Bun
Tags: vite, bunjs, node, javascript
Published: 2023-09-19 15:51:57

You might have heard that Bun is not just a runtime, but also a bundler. So you might wonder:

Why do we need Vite or any separate bundler? Couldn't we just make do with Bun?

I've collected the relevant tweets and documentation I've come across, to provide a centralized and searchable answer to this question. Since I couldn't find any, and searching on Twitter sucks.

## What Vite uses for bundling.

[Vite](https://vitejs.dev/) is a fast local development server / bundler-toolkit. Even though it touts that it lets you do unbundled development (by way of [ESM](https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm)), the devil is in the details. In production especially, Vite does use a bundler to create the bundle of JS that the client receives. It currently uses [two bundlers](https://github.com/vitejs/vite/discussions/7622), actually.

In your local development environment, Vite uses a bundler called [esbuild](https://esbuild.github.io/) to [pre-bundle dependencies](https://vitejs.dev/guide/dep-pre-bundling.html#dependency-pre-bundling) and convert them into [ESM](https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm) (to enable quick hot starts and hot reloads when you develop). Since Vite uses ESM when you work (instead of creating and always re-creating a client bundle when you update the code) this is what you've heard as [unbundled development](https://vitejs.dev/guide/why.html#slow-server-start).

For production, Vite uses the slower JS-based bundler Rollup to create a small client side JS bundle (for faster download), and for potential plugins that use Rollup's flexible API. [Even though Vite uses ESM](https://vitejs.dev/guide/why.html#why-bundle-for-production) in development environment, for speed (since network latency is not an issue there). But in production Vite can also use [esbuild](https://esbuild.github.io/) to speed up [transpilation and minification](https://github.com/vitejs/vite/discussions/7622#discussioncomment-2514757). [In the future Vite may use esbuild entirely for bundling in production instead of Rollup](https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuild), due to the speed it would gain.

**Update 2023-10-05:**

**[Rolldown](https://rolldown.rs/about)** (a Rust based bundler) will **replace Rollup and esbuild in Vite**. Why Rolldown?  Mainly to get faster production builds ('the speed of esbuild, but not only for the dev env') while also preserving the flexible API of Rollup. By consolidating into using Rolldown as a single bundler then Vite will also enforce better consistency between dev and prod environments. More in [the launch presentation for Rolldown](https://youtu.be/veCxKeLl35A?t=1535).

{% twitter 1709943106215530867 %}

## Bun is many things, also a bundler.

Bun is not just a Node replacement, but a [Zig](https://ziglang.org/) port of esbuild (initially the same fast algorithm), so includes it's own (currently limited) bundler:

{% twitter 1658552691927429121 %}

{% twitter 1701109562328170644 %}

But what about the apparent overlap between Bun and Vite? Since you can [use Bun as a bundler](https://shaneosullivan.wordpress.com/2023/05/17/using-bun-js-as-a-bundler/) ([Bun's author Jarred addressed the issues on HN](https://news.ycombinator.com/item?id=35981662)). Why is Vite still needed?


## The answer: Why Vite is still needed.

In short, Vite's creator Evan You answered the question here:

{% twitter 1701039789741629721 %}

So, you can run [Vite on Bun](https://bun.sh/guides/ecosystem/vite), no problem. [Bun has fully supported Vite since Bun v0.7](https://github.com/oven-sh/bun/issues/250#issuecomment-1646368911).

With the current caveat:

> _While Vite currently works with Bun, it has not been heavily optimized, nor has Vite been adapted to use Bun's bundler, module resolver, or transpiler._

So, currently, the distinction stands that:

**Bun is awesome as a Node.js replacement for the server (as a JS runtime).**

**Vite is great for unbundled fast development, and for flexible and optimal bundling of the JS code in production which is sent to clients over the network**. Vite has API's that many developers love, and thus it already has a [good ecosystem](https://patak.dev/vite/ecosystem.html).

Vite has [Hot Module Reloading (HMR)](https://vitejs.dev/guide/api-hmr.html), which is important for fast local development. [Bun's HMR](https://bun.sh/docs/runtime/hot#hot-mode) currently has [at least](https://github.com/oven-sh/bun/issues?q=is%3Aissue+is%3Aopen+%22--hot%22+OR+%22hmr%22+OR+%22hot+module%22+) one [open issue](https://github.com/oven-sh/bun/issues/833).

[Bun's HTTP server doc](https://bun.sh/docs/runtime/hot#http-servers) currently has a note regarding HMR:

> _Note — In a future version of Bun, support for Vite's import.meta.hot is planned to enable better lifecycle management for hot reloading and to align with the ecosystem._

In short: **Bun won't replace Vite in the near future**. (This might be some famous last words, given Bun's author Jarred's productivity, though!)

## The future?

It's hard to say for the long term future. But my guess is that people will use Vite with Bun under-the-hood, but that Bun slowly will incorporate a lot of Vite's API's, so that in the end Bun will be all you need in one place. It seems to fit with **[Bun](https://bun.sh/)**'s vision of being _**"a fast JavaScript all-in-one toolkit"**_, as their landing page states.

But my guess is that **[Vite](https://vitejs.dev/)** will still be _**"Next Generation Frontend Tooling"**_ for a while. If only for all of the projects that will still run on [Node](https://nodejs.org/en), due to:
- Developer caution and inertia (even Vite is new to many!).
- Bun's current compatibility issues and [bugs](https://github.com/oven-sh/bun/issues?q=is%3Aissue+is%3Aopen+label%3Abug+).
- Bun's currently [5%](https://bun.sh/docs/api/node-api) [missing Node API's](https://github.com/oven-sh/bun/issues/158) might be a blocker for some.
- The current lack of [Bun support on Edge network environments](https://x.com/RogersKonnor/status/1704136067467579400?s=20). I.e. [Cloudflare Workers is it's own JS runtime](https://community.cloudflare.com/t/bun-apps-support/406644) that use V8 isolates (like Chrome tabs). Whereas Bun uses JSC instead of V8, and [Bun plans on building it's own Edge network hosting](https://x.com/magnemg/status/1704167759469240467?s=20), custom hardware distributed globally and all. That may take a while. Also, [AWS adding Bun as a native runtime](https://twitter.com/thdxr/status/1701570542510191029) is currently [an open question](https://x.com/thdxr/status/1701353443380658667?s=20), which would be needed to [reduce cold starts](https://x.com/thdxr/status/1701335615118164367?s=20).

**Do you think Bun will replace Vite in the medium to distant future, and if so, why?** Share your thoughts in the comments.

Alternate article titles: Vite vs. Bun comparison. Bun vs. Vite comparison.