Wie man eine Angular-Anwendung für die Produktion bündelt
Was ist die beste Methode zum Bündeln von Angular (Version 2, 4, 6, ...) für die Produktion auf einem Live-Webserver.
Bitte geben Sie in Ihren Antworten die Angular-Version an, damit wir besser verfolgen können, wann es zu späteren Versionen kommt.
337
3
2.x, 4.x, 5.x, 6.x, 7.x, 8.x" (TypeScript) mit Angular CLI
Einmalige Einrichtung
ng new projectFolder
erstellt eine neue AnwendungSchritt der Bündelung
ng build --prod
(in der Kommandozeile ausführen, wenn das VerzeichnisprojectFolder
ist)flag
prod
bundle for production (siehe die Angular-Dokumentation für die Liste der Optionen, die mit dem production-Flag enthalten sind).Komprimieren Sie die Ressourcen mit Brotli compression mit folgendem Befehl
for i in dist/*; do brotli $i; done
Bündel werden standardmäßig in projectFolder/dist(/$projectFolder für 6) erzeugt
Ausgabe
Größen mit Angular
8.2.11
mit CLI8.3.13
und Option CSS ohne Angular-Routingdist/assets
Ressourcen, die aus der Angular-CLI-Assets-Konfiguration kopiert wurdenBereitstellung
Sie können eine Vorschau Ihrer Anwendung erhalten, indem Sie den Befehl
ng serve --prod
verwenden, der einen lokalen HTTP-Server startet, so dass die Anwendung mit Produktionsdateien über http://localhost:4200 zugänglich ist.Für einen produktiven Einsatz müssen Sie alle Dateien aus dem Ordner
dist
auf dem HTTP-Server Ihrer Wahl bereitstellen.2.0.1 Final" mit Gulp (TypeScript - Ziel: ES5)
Einmalige Einrichtung
Schritte zur Bündelung
Bündel werden in projectFolder / bundles / erzeugt
Ausgabe
Struktur der Datei
Das Beste, was ich bisher tun konnte :)
Angular 2 Produktionsablauf mit SystemJs Builder und Gulp
Angular.io hat ein Schnellstart-Tutorial. Ich habe dieses Tutorial kopiert und mit ein paar einfachen Gulp-Tasks erweitert, um alles in einem Dist-Ordner zu bündeln, der auf den Server kopiert werden kann und einfach so funktioniert. Ich habe versucht, alles so zu optimieren, dass es auf Jenkis CI gut funktioniert, so dass node_modules gecached werden können und nicht kopiert werden müssen.
Quellcode mit Beispielanwendung auf Github: https://github.com/Anjmao/angular2-production-workflow
Schritte zur Produktion
Node: Sie können zwar immer Ihren eigenen Build-Prozess erstellen, aber ich empfehle dringend, angular-cli zu verwenden, da es alle benötigten Workflows enthält und jetzt perfekt funktioniert. Wir sind bereits mit ihm in der Produktion und don't haben keine Probleme mit angular-cli überhaupt.