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.
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:
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.
The main difference with webpack example is build script in
"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 > email@example.com 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
timecommand - 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:
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.
In this article we have seen esbuild in action building simply angular application. You can see the 'application' here, and codebase here:
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.