Brauchen wir Tree-Shaking mit Webpack und Typoskript/angular2?

Question

Ich habe das Tutorial zum Hinzufügen von Webpack zu Angular von here gefolgt. Wenn ich das richtig verstanden habe, füttern wir das Hauptmodul mit dem Webpack und dann durchquert es den gesamten Baum und fügt alle referenzierten Dateien dem Bundle hinzu. Ich habe auch gelesen, dass wir dies mit Baumschütteln optimieren können.

Was ich hier nicht verstehe, warum brauchen wir das Tree-Shaking, wenn Webpack bereits nach "gebrauchten" Modulen scannt (d. H. Die, die wir "importieren").

Tut Baum-Shaking etwas Zusätzliches (wie das Überprüfen der Klassen von den Modulen, die nicht benutzt werden, und das Entfernen von Modulen, obwohl es importiert wird?) Oder missverstand ich das Konzept?

Answer 1

Wie in den Kommentaren erwähnt, ist der wirkliche Vorteil, dass es etwas Code aus den Dateien entfernen kann, während ohne Baumschütteln wird das ganze Modul im Ergebnis sein, auch wenn nur eine der exportierten Klassen verwendet wird.

Beispiel:

app.component.ts

export class AppComponent { 

    test(): void { 
     console.log("12345"); 
    } 
} 

export class AppComponentDeadCode { 

    test(): void { 
     console.log("54321"); 
    } 
} 

app.module.ts

import { AppComponent } from './app.component'; 

Jetzt in diesem Beispiel, das wir nie AppComponentDeadCode Klasse importieren.

• Ohne tree-shaking sind beide Klassen im resultierenden Modul/Bündel enthalten.
• Mit tree-shaking wird die Klasse AppComponentDeadCode aus dem resultierenden Modul/Bündel entfernt (unter Berücksichtigung, dass es keine anderen Module gibt, die es importieren).

P.S. Leider ist der Zustand dieses glänzenden Spielzeugs ziemlich "Beta" und es ist schwierig das Ergebnis leicht zu erreichen, wenn überhaupt mit typescript/angular2. Weitere Informationen darüber here.