source-map-explorer VS esbuild-loader

I use source-map-explorer to see what's inside. Lighthouse Treemap provides a similar view.

[source-map-explorer]: https://github.com/danvk/source-map-explorer

[Lighthouse Treemap]: https://umaar.com/dev-tips/270-devtools-lighthouse-treemap/

Among others source-map-explorer is exactly such a tool and describes itself as such:

You must be pulling in a big library. Have you run source map explorer? Your path forward is going to depend on the results. Maybe one of:

its npm package source-map-explorer npm install -g source-map-explorer after installing run below commands ng build --configuration production --source-map sme www/**/*.js

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.