# How to build minimal angular 12 app with esbuild

Are you curious about building your angular application with [esbuild](https://esbuild.github.io/)? 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:
https://dev.to/marcinwosinek/how-to-build-minimal-angular-12-application-with-webpack-4laa

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

https://github.com/marcin-wosinek/webpack-angular/

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:
```sh
$ 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:
```sh
$ 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
```

The size is comparable, but the build is almost 40 times slower.

[![asciicast](https://asciinema.org/a/424764.svg)](https://asciinema.org/a/424764)

# Summary
In this article we have seen esbuild in action building simply angular application. You can see the 'application' [here](https://marcin-wosinek.github.io/esbuild-angular/), and codebase here:

https://github.com/marcin-wosinek/esbuild-angular/

If you are interested in other aspects of esbuild, please let me know in comments.