Jak sprawdzić, czy AoT działa, czy nie [Webpack 2, Angular 2]?

Question

W mojej próbkę Kątowymi 2 SPA użyłem WebPACK 2 w celu

1. Bundle wszystkie moje js pliki
2. osprzętem "Drzewo Shaking", aby usunąć martwy kod i zmniejszyć Bundle js rozmiar pliku
3. i do implementacji kompilacji Ahead-of-time w celu dalszego zmniejszenia rozmiaru pliku js.

udało mi się achive "1" i "2", tworząc plik webpack.config.js i poniżej zawartość tego pliku

'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" wtyczka, która obsługuje drżenie drzewa i minimalizowanie, zmniejszyła rozmiar pliku bundle.js z 3 mb na 1 mb.

Następnie, aby zaimplementować kompilację AoT, użyłem @ngtools/webpack, a poniżej jest zmodyfikowany plik webpack.config.js z kodem pokrewnym 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' 
    } 
} 

Po AoT rozmiar pliku bundle.js jest nadal taki sam (1 mb).

Teraz moje pytanie brzmi: jak mogę sprawdzić/wiedzieć, czy kompilacja AoT działa, czy nie?

Answer 1

Po AOT kompilacji treeshaking należy usunąć @ kątowej/kompilatora (który jest odpowiednio wykorzystywany podczas JIT. A jeśli u zrobić prostą analizę wielkości dowiesz się, że prawie 40% kątowy 2 jest kompilator tak sazie

Answer 2

Można użyj source-map-explorer, aby wyświetlić zawartość pliku main.bundle.js, a następnie porównać pakiet AOT z pakietem innym niż AOT.) Nadzieję, że to pomoże.

Answer 3

Najlepszym sposobem, aby upewnić się, że Twój projekt Angular został zbudowany przy użyciu AOT, jest aby zabrudzić sobie ręce i zaglądać do skompilowanego kodu źródłowego:

Co AOT naprawdę robi za kulisami? AOT kompiluje swoje HTML w funkcje JS, które mogą być analizowane statycznie (a później drzewo shaked).

Po prostu weź udział w szablonie HTML i odszukaj go w skompilowanym JS. Na przykład, oto mój login.component.html w jednym z moich projektów:

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

Grab coś łatwe wyszukiwanie, które prawdopodobnie będą miały kilka wystąpień. Na przykład tutaj, ikona-md vpn_key. Kiedy szukać w folderze dist raz zbudowany z AOT, mogę stwierdzić, że mój pogląd został skompilowany do:

A jak byłoby bez AOT?

tak:

Widzimy, że cały szablon nie został skompilowany w JS bez AOT!

Potencjalny problem z systemem zabudowy
Kiedy mówisz:

1) Bundle wszystkie moje js pliki
2) Wdrożenie "Drzewo Shaking", aby usunąć martwy kod i zmniejszyć plik Bundle js rozmiar
3) i zaimplementować kompilację typu Ahead-of-time w celu dalszego zmniejszenia rozmiaru pliku js.

Jeśli pakiet i wdrożenie drzewo Shaking przed kompilacja AOT to nie zadziała oczywiście.

OFF TOPIC:
rozmiar Bundle wydaje mater dla Ciebie, a jeśli nie używasz już kątowa v4 Radziłbym, aby dać szansę. Niewiele/żadnych zmian zrywających (4.0.0-rc.2 jak już piszę) i kompilator szablonów został przepisany. Teraz generuje on mniej kodu dla widoków (~ 40 do ~ 50% mniej niż Angular v2.x).