Question

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

捆绑我所有的js文件
实施＆＃34; Tree Shaking＆＃34;删除死代码并减少bundle js文件大小
并实现Ahead-of-time编译以进一步减少bundle js文件大小。

我能够实现＆＃34; 1＆＃34;和＆＃34; 2＆＃34;通过创建webpack.config.js文件，以下是此文件的内容

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

＆＃34; webpack.optimize.UglifyJsPlugin＆＃34;执行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）实施＆＃34; Tree Shaking＆＃34;删除死代码并减少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编译之后，树木挖掘应该删除@ angular / compiler（在JIT期间分别使用。如果你做简单的大小分析，你会发现几乎40％的Angular 2是编译器，所以sazie

Answer 3

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

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

3 个答案: