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

Question

在我的示例Angular 2 SPA中,我使用了Webpack 2

1. 捆绑我所有的js文件
2. 实现"Tree Shaking"以删除死代码并减少bundle js文件大小
3. 并实现Ahead-of-time编译以进一步减少bundle js文件的大小.

通过创建webpack.config.js文件,我能够获得"1"和"2",以下是此文件的内容

'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"插件执行Tree Shaking和minfication,将我的bundle.js文件大小从3 mb减少到1 mb.

接下来为了实现AoT编译,我使用了@ ngtools/webpack,以下是带有AoT相关代码的修改过的webpack.config.js文件.

'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'
    }
}

在AoT之后,bundle.js文件的大小仍然相同(1 mb).

现在我的问题是如何检查/知道AoT编译是否有效？

Answer 1

确保使用Angular项目构建的最佳方法AOT是弄脏手,并查看已编译的源代码.

AOT在幕后真的做了什么？ AOT在编译你HTML进入JS它可以静态分析(以及后来的树摇动)功能.

因此,只需获取HTML模板的一部分并在已编译的JS中查找它.例如,这是我login.component.html的一个项目:

<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>

抓住易于搜索的东西,可能很少发生.例如,这里是md-icon vpn_key.当我在使用AOT构建的dist文件夹中搜索时,我发现我的视图已被编译为:

以及它如何会不AOT？

像那样:

我们可以看到,没有AOT,整个模板还没有被编译成JS!

构建系统的潜在问题
当您说:

1)捆绑我的所有js文件
2)实现"Tree Shaking"以删除死代码并减少bundle js文件大小
3)并实现Ahead-of-time编译以进一步减少bundle js文件大小.

如果在AOT编译之前捆绑并实现Tree Shaking ,它当然不会起作用.

OFF主题:
捆绑尺寸似乎对你来说很重要,如果你还没有使用Angular v4,我建议你试一试.很少/没有重大变化(我正在编写4.0.0-rc.2)并且模板编译器已被重写.它现在为视图生成更少的代码(比Angular v2.x少40%到约50%)

Answer 2

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