How to dev

How to dev

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: dev.to/marcinwosinek/how-to-build-minimal-a..

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

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:

$ 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:
    $ 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.

asciicast

Summary

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

github.com/marcin-wosinek/esbuild-angular

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

Interested in reading more such articles from Marcin Wosinek?

Support the author by donating an amount of your choice.

 
Share this
Proudly part of