Hacker News Reader

Comment by skybrian | Hacker News Reader

I tried using ESBuild directly for a small web app and it seems pretty nice. What would using Vite on top of it give me?

View on HN

A dev server with hot reloading is the big thing vite adds IMHO, at least for your day to day use. It also adds rollup and a more uniform plugin system for your production builds but really the dev server experience is where vite excels.

If you just want esbuild + hot reloading then dev-server-esbuild might be a good option: https://modern-web.dev/docs/dev-server/plugins/esbuild/ But really vite isn't much more complex or opinionated compared to it.

At least for a small site, you don't actually need a plugin to get hot reloading using esbuild:

  "scripts": {
    "build": "esbuild src/app.ts src/app.css --bundle --sourcemap --outdir=site",
    "dev": "npm run build -- --servedir=site",
  }

Unless you mean something different by "hot reloading" than "recompile on page reload?"

They mean recompile on file save and hot-patch the frontend without reloading. See: https://main.vitejs.dev/guide/features.html#hot-module-repla...

No tools like vite will detect changes, rebuild/bundle/transform, and then inject the changed HTML, JS, and CSS into the page you're viewing automatically. They work by injecting a script into the HTML they serve which connects over a websocket or SSE to monitor changes and slurp them up when notified by the dev server.

It's really a magical experience to have your code open in one window, your browser open next to it, and as soon as you hit ctrl-s instantly see the page change. I won't tweak CSS any other way, changing sizes, colors, etc is amazing with hot reload.

Esbuild works just fine with browsersync proxy. Simpler approach.

I was curious as well. I think this answers the question:

https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuil...

> While esbuild is blazing fast and is already a very capable bundler for libraries, some of the important features needed for bundling applications are still work in progress - in particular code-splitting and CSS handling. For the time being, Rollup is more mature and flexible in these regards. That said, we won't rule out the possibility of using esbuild for production build when it stabilizes these features in the future.

Code splitting is supported just fine for ESM bundles[1] (and there is little reason to use other formats nowadays), CSS handling works ok as well. I have been using ESBuild since forever and the only instability that I experienced was around sourcemap generation early on.

[1] https://esbuild.github.io/api/#splitting

Using the same tool for prod building is really a value-add. I'd love to seem them get there. I realize though that there's a fundamental difference in dev mode vs prod bundles. In dev, Vite is emitting 25-50 or so JS scripts. In prod, those will all be built into bundles. I just worry about small inconsistencies between esbuild and Rollup when it comes to things like CSS bundling or TS to JS transpilation.

In my experience, Vite offers a better onboarding process and has a more straightforward configuration format compared to ESBuild. You also get most of rollup's plugin ecosystem and a large amount of community tools made specifically for Vite (Vitest, ViteBook, vite-plugin-pwa, etc...). Also, I might be wrong about this but I don't think ESBuild has HMR, which really speeds up development.

Overall, ESBuild feels like a much lower-level tool than Vite. It's great for smaller projects or projects that require absolute and complete control over their builds, but it takes more time to setup in most cases and often requires writing your own build scripts.

For my simple app, one-line calls to ESBuild in package.json seem good enough. I run everything using 'npm run dev' or 'npm run build'. See [1].

I suppose it wouldn't scale if the app got too big and complicated.

[1] https://github.com/skybrian/serialviz/blob/main/package.json

> but it takes more time to setup in most cases and often requires writing your own build scripts.

If I don't write my own build scripts how else am I going to show my coworkers how big brained I am? I need to assert my intellectual superiority somehow...

Vite would make it more automatic. ESBuild is a great tool but it requires manual configuration and a lot of plugins and other tools for stuff Vite does out of the box.

I think of Vite as a bundle of esbuild and other tools glued together nicely into one thing which can manage your entire project.

It would give you the inability to use the same bundler for server-side only code, I believe. I'd say if there's nothing that you really need your set-up is pretty much perfect already. You may want to stick a dedicated filesystem watcher in front of esbuild though, which uses polling.

Reply on news.ycombinator.com