Dive into esbuild

To prepare your frontend code for production, you can use esbuild. Compared to webpack or rollup, esbuild offers limited code splitting options, but if your JavaScript code is mostly used on one page, esbuild can be a good solution.

esbuild how-to

First, install it:

npm install --save-dev esbuild

To bundle and minify JavaScript files, pass the entry point file as the first argument, and use the --outdir switch to specify the output directory. You can select an output format with the --format switch. Use --format=esm to output standard (ESM) JavaScript modules.

esbuild in.js --bundle --format=esm --outdir=out

To make your code compatible with a wide range of browsers, use the --target switch. For example, to target the Safari 11 web browser:

esbuild --target=safari11 --bundle --outdir=out

To minify your code, use the --minify switch:

esbuild --target=safari11 --minify --bundle --outdir=out

esbuild bundles and minifies CSS too. It recognizes the .css extension and handles it appropriately:

esbuild --bundle --minify in.css --outfile=out.css

esbuild’s CSS minification is quite competitive.

Give esbuild a try

esbuild bundles, minifies and transpiles JavaScript. It also bundles and minifies CSS and runs fast! It’s a competitive choice if you don’t need sophisticated code splitting.