State of ng2’s AOT compilation & GCC

Minko Gechev’s blog has had some interesting articles recently about ng2’s Ahead-of-Time (AOT) compiler and production build stacks. He describes two typical stacks making use of ng2’s AOT compilation step.

Normally, angular 1 and the platform-browser-dynamic use Just-in-time compilation (JIT), which means both ng2 and your app payload are sent to the client’s browser and compiled before running.

AOT compilation happens with ng2c, which pre-compiles all ng2 code during your build, instead of client-side, to save clients time with payload size and initialization.

Traditional build steps to reduce ng2-hello-world to 49kb:

1. AOT Compile
2. Tree-shake
3. Bundle
4. Minify
5. Compress

Should be familiar to everyone who’s done a production build - but more steps mean more tools, more decision and more variation between developers. I like standardisation and reducing decision fatigue, so…

Advanced build steps to reduce ng2-hello-world to 20kb:

1. AOT Compile
2. Google Closure Compiler
3. Compress

Google Closure Compiler (GCC) takes the place of the ‘Tree shake’, ‘Bundle’ and ‘Minify’ steps with Google’s magic, equal parts cryptic and genius.

The problem: Currently GCC doesn’t support ECMA2016 modules perfectly and, since that’s what ng2c emits - we have a problem. Nevertheless, there’s an open issue working to shoehorn ng2 into GCC. It’s scheduled for release for angular 2.1.0, so it’s a race between GCC updating to support ECMA2016 and 2.1’s shoehorn hack to get it working.

This it’s very exciting to have a best-of-class tool to squash our code into it’s functional minimum with a single cmd.

Eagerly watching the progress.