Try Angular 2 AoT compilation

Suguru Inatomi
lacolaco-blog
Published in
2 min readOct 5, 2016

with Angular-CLI

AngularConnect 2016 Keynote

Ahead-of-Time(AoT) compilation is a key feature of Angular 2. It bring us big performance and small payload size. Let’s try it easily. It’s good news, Angular-CLI started AoT support experimentally!

Install CLI

Type a command to install angular-cli package in global

> npm install -g angular-cli

After installation, check the version.

> ng version
angular-cli: 1.0.0-beta.16
node: 6.7.0
os: darwin x64

Create a project

Create new project with CLI

> ng new example-app

It takes a long long time. Be patient…

After that, move to the generated directory.

> cd example-app

Build in JiT mode

At first, let’s build the project in JiT mode. Type a command:

> ng build

Built files will be in `dist` directory.

Explore the bundle

Let’s explore and measure the bundled file. Install a tool from npm:

> npm install -g source-map-explorer

And use source-map-explorer for the bundle and source map

> source-map-explorer dist/main.bundle.js dist/main.map

Web browser opens automatically and show a graph telling items of the bundle!

JiT bundle

Awesome! Now we can see that `@angular/compiler` is the largest module. In JiT mode, all Angular applications require the compiler at runtime. In AoT mode, it doesn’t. Let’s make it sure.

Build in AoT mode

Note: Angular-CLI AoT support is really experimental yet.

To build with AoT, use ` — aot` option.

> ng build --aot

And explore the bundle again.

> source-map-explorer dist/main.bundle.js dist/main.map
AoT bundle

Yeeeeeah! We removed `@angular/compiler` module from our bundle! By AoT compilation, we can eliminate files which are no longer used in runtime and can reduce initial loss time for compilation.

Conclusion

  • Angular-CLI started AoT support experimentally
  • `source-map-explorer` is a great tool to measure our bundle

if you have not watched yet, I recommend you this video, Martin’s great session about optimizing bundle at AngularConnect 2016.

Thanks.

--

--

Suguru Inatomi
lacolaco-blog

a.k.a. lacolaco / Google Developers Expert for Angular / ng-japan organizer