Bündelung und Minification von Angular 2 Schnellstartprojekt

Question

Wie Bündelung und Minification von Angular 2 Schnellstart-Projekt zu tun, um HTTP-Anforderungen bei Erstbelastung zu reduzieren?

Beim Laden der ersten Seite des Schnellstart-Projekts werden ca. 300 http-Anfragen generiert, was viel Zeit in Anspruch nimmt.

Ich las in einigen Blog, dass Bündelung und Minification hilfreich sein kann, um diese Anrufe zu reduzieren.

eckig 2 haben viele Möglichkeiten, dies zu tun. Web Pack SystemJs Winkel CLI

aber ich bin nicht finden können, wie mit Schnellstart-Projekt eine dieser verwenden.

Answer 1

Sie können dazu den Angular Compiler verwenden. Es gibt mehrere Möglichkeiten, dies zu erreichen.

Option 1: Docker Wenn Sie bereits Docker verwenden und/oder Docker-compose, ist dies eine ziemlich gute Wahl, und super einfach. Ich habe einen Container erstellt, der Ihre Anwendungsquelle überwachen und jedes Mal neu erstellen kann, wenn Sie eine Datei speichern. Sie können wie so dass Container verwenden (Vorsicht, das Bild ist etwa 600 MB - sorry, Winkel Compiler tatsächlich sehr groß ist!):

docker run --rm -v $(pwd)/src treyjones/ng build -w 

In diesem Fall gehe ich davon aus Ihrer Anwendung in src ist.

Sie können diesen Befehl auch verwenden, um die volle Hilfe-Dokumentation für ng zu sehen:

docker run --rm treyjones/ng -h 

Eigentlich Online die vollständige Dokumentation zu finden, hat sich als schwierig erwiesen, zu mir.

Wenn Sie Docker für diese nicht verwenden möchten, können Sie auch einfach tun, was der Container tut, seien Sie gewarnt, es ist immer noch eine große Installation, nur durch Knoten statt Docker. Zwei Möglichkeiten:

npm i angular-cli@1.0.0-beta.24 -g 

Option 2 - fügen Sie es als eine Abhängigkeit des Projekts in package.json:

"devDependencies": { 
    "angular-cli": "1.0.0-beta.24" 
} 

beta.24 die neueste Version von npm aufgeführt ist. Ich habe nur beta.18 benutzt. Ich kann jedoch bestätigen, dass der Build-Prozess sehr glatt ist und für mich sehr gut funktioniert hat.

You can read a little bit more about how this is intended to work on github.

Answer 2

Um das Laden hunderter kleiner Dateien zu vermeiden, erstellen Sie in der Regel mithilfe eines Bundlers wie z. B. webpack sogenannte Bundles. Webpack ist ein Werkzeug, um die Abhängigkeiten in Ihrem Projekt aufzulösen und bietet gute Werkzeuge für Typescript, Javascript, ES2015 Modulimporte und so weiter.

Um eine Vorstellung davon zu bekommen, wie die Dinge funktionieren, schauen Sie sich das Projekt angular2-webpack-starter an.

Auch die Angular CLI verwendet Webpack unter der Haube.

Wenn Sie an Webpack interessiert sind, lassen Sie mich sagen, dass die Lernkurve ziemlich steil ist.Versuchen Sie nicht, ein vollständiges Projekt wie das oben erwähnte Projekt angular2-webpack-starter zu verstehen. Beginnen Sie stattdessen mit etwas Einfachem, zum Beispiel dem getting started Abschnitt des Webpack-Tutorials.

Answer 3

Der einfachste Weg, um dies zu tun, mit viel Platz für Wachstum ist die Verwendung dieser "Vorlage" für eckige 2 Projekte. Es bietet Ihnen auch eine großartige Visualisierung beim Bau für die Produktion. AoT, Minification, Webpack, etc... template