DEV Community

Marcin Wosinek
Marcin Wosinek

Posted on • Updated on

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:

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

GitHub logo 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"
Enter fullscreen mode Exit fullscreen mode

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

$ npm install --save-dev esbuild
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Links

Summary

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

GitHub logo 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.

Discussion (0)