如何驗證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

確保使用AOT構建Angular項目的最佳方法是弄臟手，並查看已編譯的源代碼。

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 ，它當然不會起作用。

無關：
捆綁大小似乎對你來說很重要，如果你還沒有使用Angular v4，我建議你試一試。 很少/沒有重大變化（我正在編寫4.0.0-rc.2）並且模板編譯器已被重寫。 它現在為視圖生成更少的代碼（比Angular v2.x少40％到約50％）

Answer 2

在AOT編譯之后，treeshaking應該刪除@ angular / compiler（在JIT期間分別使用。如果你做簡單的大小分析，你會發現幾乎40％的Angular 2是編譯器所以sazie

Answer 3

您可以使用source-map-explorer查看main.bundle.js的內容，並且可以將AOT包與非AOT包進行比較。 希望能幫助到你。