Ich baue eine Angular 2-Anwendung und bündle sie mit dem Webpack. Im Moment ist meine Anwendung noch klein, aber die Webpack-Aufgabe dauert bereits etwa 10 Sekunden. Ist es möglich, meine Webpack-Konfiguration oder die TypeSript-Kompilierungsoptionen zu optimieren, um die Kompilierungs- und Verpackungsdauer zu verbessern?
Dies ist die Webpack-Konfiguration, die ich verwende:
%Vor%Und die tsconfig:
%Vor%AKTUALISIEREN (siehe meine Antwort für die feste webpack.config)
Ich probiere das von @jpwiddy vorgeschlagene DLL-Webpack-Plugin aus, indem ich angular in einem separaten Build kompiliere, um während der Entwicklung nur den Anwendungscode neu erstellen zu müssen und viel Zeit für die Kompilierung zu gewinnen.
Nach einer Überprüfung der Ausgabe JS ist die Dateigröße jedoch ziemlich gleich, und es gibt noch einen Winkelcode.
Hier ist die neue Webpack-Konfigurationsdatei für Winkelquellen:
%Vor%Und die aktualisierte Webpack-Konfiguration für die Anwendung:
%Vor%Hier ist einer der Winkelcode, den ich in meiner Anwendung JS-Ausgabe gefunden habe:
%Vor%Habe ich etwas in der neuen Konfiguration verpasst, um zu verhindern, dass das Webpack Winkelquellen in der Ausgabe enthält?
Danke
Ich habe es geschafft, meine Konfiguration mit dem brandneuen Modul webpack-dll-bundles-plugin ( welches DllPlugin und DllReferencePlugin im Hintergrund verwendet und genau das tut, wonach ich gesucht habe: den Build von Angular 2 in seinem eigenen Bundle zu isolieren und jedes Mal das ganze Bündel neu aufzubauen möchte meinen Anwendungscode neu erstellen (zB mit einem Watcher).
Meine Wiederherstellungszeit fiel von 10 Sek. auf 1 Sek.
Hier ist meine neue Webpack-Konfiguration:
%Vor%Ein guter Weg, den ich persönlich gemacht habe, der den Webpack-Build-Prozess beschleunigt hat, ist das Implementieren von DLLs in Ihrem Build.
Webpack analysiert Ihren Code für require s und import s und erstellt dann aus diesen Anweisungen eine Tabelle mit allen Modulabhängigkeiten und Links, in denen diese Dateien gefunden werden können.
Das DLL-Plugin verbessert dies, da, wenn Sie Ihre Abhängigkeiten mit einer DLL registrieren, jedes Mal, wenn sich diese Abhängigkeiten ändern (sollte sehr selten sein), Sie eine DLL (bestehend aus einem JavaScript-Paket und einer JSON-Manifestdatei) erstellen umschließt alle diese Abhängigkeiten in einem einzigen Paket. Auf dieses Paket wird dann verwiesen, wenn diese Abhängigkeiten in die App übernommen werden.
Ein kurzes Beispiel:
%Vor%... und dann als so bezeichnet -
%Vor%Tags und Links javascript angular typescript webpack ts-loader