parcel VS esbuild

https://parceljs.org/ is another.

It even supports languages like `` out of the box which is pretty cool.<p>IIRC it downloads necessarily plugins on the fly.

Parcel is another alternative that requires zero configuration and is super fast. If you want a simple React setup without any hassle, Parcel is a great choice.

From its documentation [1] it looks a lot like a parceljs replacement [2], i.e. a zero config bundler which processes and bundles the dependencies in .html pages. So great for simple websites, not for replacing an entire Vite stack.

[1] https://bun.sh/docs/bundler/fullstack

[2] https://parceljs.org

Packagers are the ones we most frequently come into contact with, such as Webpack Vite and Parcel. The latter may not be commonly used, but it is also a well-established tool.

npm packages dramatically sped up the productivity of developers by being able to leverage other developers' work. However, it had a major disadvantage: cjs was not compatible with web browsers. To solve this problem, the concept of bundlers was born. browserify was the first bundler which essentially worked by traversing an entry point and "bundling" all the require()-ed code into a single .js file compatible with web browsers. As time went on, other bundlers with additional features and differentiators were introduced. Most notably webpack, parcel, rollup, esbuild and vite (in chronological order).

The AI Framework Debate

You will need a web bundler. You can use parcel.js

To run this script, we need a web bundler like parcel js.

Official Website

Pre-bundle all the dependencies on the "optimization boundary" list into node_modules/.vite/deps/ folder. This step is done by esbuild.

ESBuild is a bundler. The subtitle on the website is literally “An extremely fast bundler for the web”. To bundle, pass —-bundle flag.

https://esbuild.github.io/

esbuild for bunding both the client and server separately

> like individual loaders/modules are/were slow, rather than webpack itself

tbh this is just nitpicking, I'm not a react developer to do CRA debugging for them. They're paid by Facebook a couple orders of magnitude more than what we're making here, and if they're fine with the intact CRA configuration being that slow, while a third-party alternative rips through the massive pile of shit I'm working on while not bringing any obvious downsides, I'll just to the alternative.

It's a well known problem: esbuild, which is the base of vite's HMR, boasts of speeds dozens to hundreds of times faster than webpack:

https://github.com/evanw/esbuild?tab=readme-ov-file#why

Micro-frontend has always aroused my curiosity: I wanted to understand how they work, how to build them, what their pros and cons are. In 2018, inspired by this topic, I tried to build something similar to single-spa in one of the pet projects. At that time, there was no Webpack Module Federation (WMF), and Webpack itself seemed inconvenient. The choice fell on ESBuild and importmap. Browser support for importmap at the time was mostly on paper or with special flags in browsers. For this reason, I used a polyfill. But, surprisingly, everything worked and even in several projects.

Why esbuild? compared to other tools esbuild keeps things minimal, it is very fast(the fastest bundler as of today) and supports typescript and esm by default.