How to build minimal angular 12 app with esbuild

Are you curious about building your angular application with esbuild? esbuild is a new build tool in js land, mostly know for it's speed.

The application

We will migrate to esbuild the demo application that I presented in:

How to build minimal angular 12 application with webpack

Marcin Wosinek ・ Jul 8 ・ 2 min read

#webpack #angular #typescript

If you are interested in the code, you can check the article above, or directly the repository:

marcin-wosinek / webpack-angular

Minimal angular application build with webpack

The application is simplified to the point of being not much more than just a proof-of-a-concept. One of the risks I see, is if dependency injection will work as expected with all options of specifying dependencies. Let me know here in comments is you have any troubles. Besides, in future articles I'll take a look on more complicated angular application build with esbuild.

Build script

The main difference with webpack example is build script in package.json:

"build": "esbuild src/index.ts --bundle --outfile=dist/main.js"

for it to work we need to install esbuild as dependency:

$ npm install --save-dev esbuild

Head to head comparisons with webpack

Let's compare the build speed with webpack. First, the esbuild:

$ time npm run build

> esbuild-angular@1.0.0 build
> esbuild src/index.ts --bundle --outfile=dist/main.js


  dist/main.js  1.7mb ⚠️

⚡ Done in 166ms

real    0m0,416s
user    0m0,606s
sys     0m0,070s

Key figures for us to focus are:

0.4s - real time as returned form time command - the clock difference between starting a command & finishing it. It's slightly longer then what was returned by esbuild, as it's system command, we can assume it similarly skewed for both esbuild & webpack.

1.7mb - dist/main.js size

When we add --minify flag to the build script, we get as follow:

0.4s - build time

773.9kb - dist/main.js size

Similar values for webpack, with:

mode: "development" - minimization off:

sh
$ time npm run build
...
asset main.js 3.22 MiB [emitted] (name: main)
...
real    0m4,088s
user    0m7,025s
sys     0m0,251s

` about ten times a long as esbuild & almost twice as big as non-minified esbuild run

`mode: "production" - minimization on:

$ time npm run build
...
asset main.js 811 KiB [emitted] [minimized] [big] (name: main) 1 related asset
...
real    0m15,648s
user    0m25,688s
sys     0m0,530s