esbuild-loader VS vite

i see. there are a loaders like https://github.com/privatenumber/esbuild-loader that works with webpack but i haven't given it a try yet.

you can use it with webpack didn't try it myself

If you are a webpack user and have heard about esbuild speed, you may start questioning your js-bundler choices. Luckily, you don't have to drop your hand-crafted webpack config just now. Thanks to esbuild-loader, you can get part of the speed improvement without doing a whole migration.

esbuild-loader (secret sauce!) fork-ts-checker-webpack-plugin (helps us with typechecking) nodemon-webpack-plugin (We can also use webpack-dev-server)

For people already on webpack, there's esbuild-loader (https://github.com/privatenumber/esbuild-loader)

esbuild is a JS and TS bundler that promises ultra-fast build times. We use webpack, and there is support to leverage esbuild with esbuild-loader.

The first thing I did was replace babel-loader and Terser (minification tool) with esbuild-loader. This made our JS compile around 12 times faster, it went down to 1.4 seconds. It was a good start.

In fact, the create-react-app-esbuild is only an encapsulation of esbuild-loader.

I just started using this: privatenumber/esbuild-loader: ⚡️ Speed up your Webpack build with esbuild (github.com)

Both would be good to file. I’m happy to investigate myself if you don’t have the time.

One thing to be aware of is that some other tools that integrate esbuild do so incorrectly. For example, the 3rd-party integration of esbuild into Webpack mis-configures esbuild in a way that causes issues with JSX: https://github.com/privatenumber/esbuild-loader/pull/107. This isn’t a problem with esbuild itself.

Frontend: Vite + React + TypeScript Backend: Express (Node.js) + TypeScript Database: Neon (PostgreSQL) Note: You can use other databases like MongoDB as well.

To begin, we will create a new blank project. You can skip this paragraph if you’re looking to add the solution to an existing project. Using Node Package Manager (NPM), we will create the project with the command: npm create vue@latest. The default settings are fine for our purposes, but if you prefer, you can change them. I enabled ESLint and Prettier options. There are other ways to initiate a Vue project, but I prefer this one because it uses Vite as the development server by default.

As a replacement we've chosen Vite. This is a suitable replacement as it comes with a super fast development server and a very well optimized release build.

What's the solution? In one word: Vite.

Vite has become pretty much the norm for modern web development, but did you know it can also help support older browsers? Enter vite-plugin-legacy.

However, the transition wasn’t as seamless as I had hoped. Although Rspack is nearing production readiness (at version 1.0.0-beta.4 as of this writing), I decided to opt for the more mature and battle-tested solution: Vite.

I don't like very much svelte (the js library chosen by Gradio team) and I already have a vuejs/vite frontend project that I can re-use. I solved this installing the nodejs 18 Debian package and starting the nodejs build from within the app.py file using subpropcess.run().

Vite

Vite is a newer build tool that focuses on delivering a fast development experience. Created by Evan You, the creator of Vue.js, Vite uses a different approach compared to traditional bundlers like Webpack. Vite leverages modern browser features and tools like ES modules and Rollup to deliver a faster and more efficient development process.