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

Question

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

1. 打包我所有的js文件
2. 实现“Tree Shaking”以删除无用代码并减少 bundle js 文件大小
3. 并实现提前编译以进一步减少 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'
    }
}

执行 Tree Shaking 和 minfication 的“webpack.optimize.UglifyJsPlugin”插件将我的 bundle.js 文件大小从 3 mb 减少到 1 mb。

接下来为了实现AoT编译，我使用了@ngtools/webpack , 下面是修改 webpack.config.js 文件，添加 AoT 相关代码。

'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 函数，这些函数可以进行静态分析(以及后来的 tree shaking)。

因此，只需取出一部分 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 文件夹中搜索时，我可以发现我的 View 已编译为:

如果没有 AOT 会怎么样？

像这样:

我们可以看到整个模板在没有AOT的情况下并没有编译成JS!

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

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.

如果您在 AOT 编译之前捆绑并实现 Tree Shaking，它当然不会工作。

题外话:
Bundle size 似乎对你很重要，如果你还没有使用 Angular v4，我建议你试一试。很少/没有重大更改(我正在编写 4.0.0-rc.2)并且模板编译器已被重写。它现在为 View 生成更少的代码(比 Angular v2.x 少 40% 到 50%)