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

Question

在我的样本角2 SPA，我已经使用的WebPack 2以

1. 捆绑我所有的js文件
2. 贯彻“树摇晃”删除无用代码，减少包的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' 
    } 
} 

“webpack.optimize.UglifyJsPlugin”的内容插件，它执行Tree Shaking和Minfication，将我的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

AOT编译之后，treeshaking应该删除@角/编译器（其中JIT过程中分别使用。而如果妳做简单的大小分析，你将了解到的角2近40％是编译器，sazie

Answer 2

你可以使用source-map-explorer查看main.bundle.js的内容，并且可以将AOT捆绑包与非AOT捆绑软件进行比较。希望它有帮助

Answer 3

确保使用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？

就像是：

我们可以看到，整个模板没有被编译成JS无AOT！

与构建系统的潜在问题
当你说：

1）捆绑我所有的js文件
2）实施“树摇晃”删除无用代码，减少包的js文件大小为
3）并且实施提前编译以进一步减小bundle js文件大小。

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

题外话：
集束大小似乎母校为你，如果你还没有使用角V4我劝你放弃一试。很少/没有重大变化（正如我正在写的4.0.0-rc.2）和模板编译器已被重写。它现在生成的视图代码较少（比Angular v2.x减少约40％〜50％）