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 '21

#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

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

Links

• my course about esbuild

Summary

In this article we have seen esbuild in action building simply angular application. You can see the 'application' here, and codebase here:

marcin-wosinek / esbuild-angular

Example application in angular and build with esbuild

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