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 formtime
command - the clock difference between starting a command & finishing it. It's slightly longer then what was returned byesbuild
, 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 time773.9kb
- dist/main.js size
Similar values for webpack, with:
- `mode: "development" - minimization off:
about ten times a long as esbuild & almost twice as big as non-minified esbuild run$ time npm run build ... asset main.js 3.22 MiB [emitted] (name: main) ... real 0m4,088s user 0m7,025s sys 0m0,251s
- `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.
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.