如何验证AoT是否正常工作[Webpack 2，Angular 2]？

Question

In my sample Angular 2 SPA , I have used Webpack 2 in order to

1. Bundle all my js files
2. Implement "Tree Shaking" to remove dead code and reduce bundle js file size
3. and to implement Ahead-of-time compilation to reduce the bundle js file size further.

I was able to achive "1" and "2" by creating a webpack.config.js file , and below are the contents of this file

'use strict';
const webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    entry: './src/main.js',       
    plugins: [

    new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        compress: false
    })
    ],
    output: {
        filename:'./src/bundle.js'
    }
}

"webpack.optimize.UglifyJsPlugin" plugin which does the Tree Shaking and minfication , reduced my bundle.js file size from 3 mb to 1 mb.

Next in order to implement AoT compilation , I have used @ngtools/webpack , and below is the modified webpack.config.js file with AoT related code.

'use strict';
const webpack = require('webpack');
const AotPlugin = require('@ngtools/webpack').AotPlugin;

module.exports = {
    devtool: 'source-map',
    entry: './src/main.js',
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: '@ngtools/webpack'
            }
        ]
    },
    plugins: [

    new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        compress: false
    }),
     new AotPlugin({         
          tsConfigPath: 'src\\tsconfig.json',
          mainPath: 'main.ts',         
          "skipCodeGeneration": true
      }), 
    ],
    output: {
        filename:'./src/bundle.js'
    }
}

After AoT the size of bundle.js file is still same(1 mb).

Now my question is how can I check/know whether AoT compilation is working or not ?

Answer 1

The best way to make sure that your Angular project is built using AOT is to get your hands dirty and take a look into the compiled source code.

What does AOT really do behind the scenes? AOT is compiling your HTML into JS functions which can be statically analysed (and later tree shaked).

So just take a part of your HTML template and look for it inside your compiled JS. For example, here's my login.component.html in one of my projects:

<md-card>
  <form [formGroup]="loginForm" (ngSubmit)="onSubmit(loginForm)" fxLayout="column">
    <md-input-container class="margin-top-x1">
      <span mdPrefix>
          <md-icon color="primary">person</md-icon>
        </span>
      <input mdInput type="text" placeholder="Username" formControlName="username" required>
    </md-input-container>

    <md-input-container class="margin-top-x1">
      <span mdPrefix>
          <md-icon color="primary">vpn_key</md-icon>
        </span>
      <input mdInput type="password" placeholder="Password" formControlName="password" required>
    </md-input-container>

    <div fxLayout="row" fxFlex="100%" fxLayoutAlign="start center" class="form-error" *ngIf="users.connectionFailed">
      <md-icon color="warn">error</md-icon>
      <p>Username and password do not match</p>
    </div>

    <button md-raised-button color="primary" class="margin-top-x1" [disabled]="loginForm.invalid || users.isConnecting || users.isConnected">
      <span *ngIf="!users.isConnecting && !users.isConnected">
        Log in
      </span>

      <span *ngIf="users.isConnecting || users.isConnected" fxLayout="row" fxLayoutAlign="center center">
        Logging in <md-spinner></md-spinner>
      </span>
    </button>
  </form>
</md-card>

Grab something easy to search, that will probably have few occurrences. For example here, the md-icon vpn_key . When I search in dist folder once built with AOT, I can find that my view has been compiled to:

And how would it be without AOT ?

Like that:

We can see that the whole template hasn't been compiled into JS without AOT !

Potential problem with your build system
When you say:

1) Bundle all my js files
2) Implement "Tree Shaking" to remove dead code and reduce bundle js file size
3) and to implement Ahead-of-time compilation to reduce the bundle js file size further.

If you bundle and implement Tree Shaking before the AOT compilation it won't work of course.

OFF TOPIC:
Bundle size seems to mater for you and if you're not already using Angular v4 I'd advise you to give a try. Few/no breaking changes yet (4.0.0-rc.2 as I'm writing) and the template compiler has been rewritten. It now generate less code for the views (~40 to ~50% less than Angular v2.x)

Answer 2

在AOT编译之后，treeshaking应该删除@ angular / compiler（在JIT期间分别使用。如果你做简单的大小分析，你会发现几乎40％的Angular 2是编译器所以sazie

Answer 3

You can use source-map-explorer to view the content of your main.bundle.js and you can compare the AOT bundle with the non-AOT bundle. Hope it helps.