webentwicklung-frage-antwort-db.com.de

Angular2 CLI-Paket für große Anbieter: Wie lässt sich die Größe für Produkte verbessern?

Ich habe eine einfache App, die mit angular-cli initialisiert wurde.

Es werden einige Seiten relativ zu 3 Routen angezeigt. Ich habe 3 Komponenten. Auf einer dieser Seiten verwende ich lodash- und Angular2-Http-Module, um Daten zu erhalten (mithilfe von Rxjs Observables, Karte und Abonnement). Ich zeige diese Elemente mit einem einfachen ngFor.

Aber trotz der Tatsache, dass meine App wirklich einfach ist, bekomme ich ein meiner Meinung nach RIESIGES Paket und Karten. Ich spreche zwar nicht über gzip-Versionen, aber vor dem Gzipieren die Größe. Diese Frage ist nur eine allgemeine Empfehlung.

Einige Testergebnisse:

ng bauen

Hash: 8efac7d6208adb8641c1 Zeit: 10129 ms Chunk {0} main.bundle.js, main.bundle.map (main) 18,7 kB {3} [initial] [gerendert]

chunk {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (Stile) 155 kB {4} [Anfang] [gerendert]

chunk {2} scripts.bundle.js, scripts.bundle.map (Skripts) 128 kB {4} [initial] [gerendert]

chunk {3} vendor.bundle.js, vendor.bundle.map (Anbieter) 3,96 MB [initial] [gerendert]

chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 Bytes [Eintrag] [gerendert]

Warten Sie: 10Mb Vendor Bundle-Paket für eine solche einfache App?

ng Build --Prod

Hash: 09a5f095e33b2980e7cc Zeit: 23455ms Chunk {0} main.6273b0f04a07a1c2ad6c.bundle.js, main.6273b0f04a07a1c2ad6c.bundle.map (main) 18,3 kB {3} [initial] [gerendert]

chunk {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css, styles.bfdaa4d8a4eb2d0cb019.bundle.map, styles.bfdaa4d8a4eb2d0cb019.bundle.map (styles) 154 kB {4} [initial] [gerendert]

chunk {2} scripts.c5b720a078e5464ec211.bundle.js, scripts.c5b720a078e5464ec211.bundle.map (Skripts) 128 kB {4} [initial] [gerendert]

chunk {3} vendor.07af2467307e17d85438.bundle.js, vendor.07af2467307e17d85438.bundle.map (vendor) 3,96 MB [initial] [gerendert]

chunk {4} inline.a345391d459797f81820.bundle.js, inline.a345391d459797f81820.bundle.map (inline) 0 Byte [Eintrag] [gerendert]

Warten Sie noch einmal: so eine ähnliche Herstellerpaketgröße für prod?

ng build --prod --aot

Hash: 517e4425ff872bbe3e5b Zeit: 22856ms Chunk {0} main.95eadabace554e3c2b43.bundle.js, main.95eadabace554e3c2b43.bundle.map (main) 130 kB {3} [initial] [gerendert]

chunk {1} styles.e53a388ae1dd2b7f5434.bundle.css, styles.e53a388ae1dd2b7f5434.bundle.map, styles.e53a388ae1dd2b7f5434.bundle.map (styles) 154 kB {4} [initial] [gerendert]

chunk {2} scripts.e5c2c90547f3168a7564.bundle.js, scripts.e5c2c90547f3168a7564.bundle.map (scripts) 128 kB {4} [initial] [gerendert]

chunk {3} Anbieter.41a6c1f57136df286f14.bundle.js, Hersteller.41a6c1f57136df286f14.bundle.map (Anbieter) 2,75 MB [initial] [gerendert]

chunk {4} inline.97c0403c57a46c6a7920.bundle.js, inline.97c0403c57a46c6a7920.bundle.map (inline) 0 Byte [Eintrag] [gerendert]

ng build --aot

Hash: 040cc91df4df5ffc3c3f Zeit: 11011 ms Chunk {0} main.bundle.js, main.bundle.map (main) 130 kB {3} [initial] [gerendert]

chunk {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (Stile) 155 kB {4} [Anfang] [gerendert]

chunk {2} scripts.bundle.js, scripts.bundle.map (Skripts) 128 kB {4} [initial] [gerendert]

chunk {3} vendor.bundle.js, vendor.bundle.map (Anbieter) 2,75 MB [initial] [gerendert]

chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 Bytes [Eintrag] [gerendert]

Also ein paar Fragen zur Bereitstellung meiner App auf prod:

  • Warum sind die Lieferantenpakete so groß?
  • Wird das Baumrütteln von angle-cli ordnungsgemäß verwendet? 
  • wie kann man diese Bündelgröße verbessern?
  • Sind die .map-Dateien erforderlich?
  • Sind die Testfunktionen in Bundles enthalten? Ich brauche sie nicht in prod.
  • Generische Frage: Was sind die empfohlenen Tools, die Sie für Produkte packen sollten? Vielleicht ist eckig-cli (mit Webpack im Hintergrund) nicht die beste Lösung? Kann ich MEHR tun?

Ich habe viele Diskussionen über Stack Overflow gesucht, finde aber keine generische Frage.

95
BlackHoleGalaxy

Update Oktober 2018

Da diese Antwort viel Anklang fand, dachte ich, dass es am besten wäre, sie mit neueren Angular-Optimierungen zu aktualisieren: 

  1. Ein anderer Antworter sagte, ng build --prod --build-optimizer ist eine gute Option für Benutzer, die weniger als Angular v5 verwenden. Bei neueren Versionen erfolgt dies standardmäßig mit ng build --prod
  2. Eine weitere Option ist die Verwendung von Modul-Chunking/Lazy Loading, um Ihre Anwendung besser in kleinere Abschnitte aufzuteilen 
  3. Die Ivy-Rendering-Engine wird zwar noch nicht in Produktion sein, wird jedoch bald bessere Bündelgrößen bieten
  4. Vergewissern Sie sich, dass Ihre 3rd Party Deps vom Baum verwischt werden können. Wenn Sie Rxjs v6 noch nicht verwenden, sollten Sie dies tun. 
  5. Wenn alles andere fehlschlägt, verwenden Sie ein Tool wie webpack-bundle-analyzer , um zu sehen, was in Ihren Modulen zu Schwellungen führt

Einige Behauptungen, dass die Verwendung der AOT-Kompilierung die Größe des Lieferantenpakets auf 250 KB reduzieren kann. In BlackHoleGalaxys Beispiel verwendet er jedoch die AOT-Kompilierung. Es bleibt immer noch eine Anbieterpaketgröße von 2,75 MB mit ng build --prod --aot, 10x größer als die angeblichen 250 KB. Dies ist nicht die Norm für Angular2-Anwendungen, auch wenn Sie Version 4.0 verwenden. 2,75 MB sind immer noch zu groß für alle, die Wert auf Leistung legen, insbesondere auf einem mobilen Gerät. 

Es gibt einige Möglichkeiten, die Leistung Ihrer Anwendung zu verbessern: 

1) AOT & Tree Shaking (eckig-cli macht dies aus der Box) 

2) Verwendung von Angular Universal A.K.A. serverseitiges Rendering (nicht in cli) 

3) Web Workers (wieder nicht in cli, sondern eine sehr nachgefragte Funktion)
siehe: https://github.com/angular/angular-cli/issues/2305

4) Servicemitarbeiter
siehe: https://github.com/angular/angular-cli/issues/4006

Möglicherweise benötigen Sie nicht alle in einer einzigen Anwendung. Dies sind jedoch einige der derzeit verfügbaren Optionen zur Optimierung der Angular-Leistung. Ich glaube/hoffe, Google ist sich der Leistungsmängel sofort bewusst und plant, dies in Zukunft zu verbessern. 

Hier ist ein Hinweis, der einige der oben genannten Konzepte ausführlicher behandelt: 

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

36
Jack Clancy

Verwenden Sie die neueste Version von angle cli und verwenden Sie den Befehl ng build --prod --build-optimizer Die Buildgröße für prod wird definitiv (verkleinern.

Das tut der Build Optimizer unter der Haube:

Der Build-Optimierer hat zwei Hauptaufgaben. Erstens können wir Teile Ihrer Anwendung als rein kennzeichnen. Dies verbessert die Baumstörung, die durch die vorhandenen Werkzeuge bereitgestellt wird, und entfernt zusätzliche Teile Ihrer Anwendung, die nicht benötigt werden.

Der zweite Schritt, den der Build-Optimierer ausführt, ist das Entfernen von Angular-Dekoratoren aus dem Laufzeitcode Ihrer Anwendung. Dekoratoren werden vom Compiler verwendet und werden zur Laufzeit nicht benötigt und können entfernt werden. Jeder dieser Jobs verringert die Größe Ihrer JavaScript-Bundles und erhöht die Startgeschwindigkeit Ihrer Anwendung für Ihre Benutzer.

Hinweis: Ein Update für Angular 5, das ng build --prod erledigt automatisch den oben genannten Prozess :)

18
Shubhendu Vaid

Erstens sind die Anbieterpakete riesig, einfach weil Angular 2 auf viele Bibliotheken angewiesen ist. Mindestgröße für Angular 2-App beträgt etwa 500 KB (in einigen Fällen 250 KB, siehe unterer Beitrag).
Tree Shaking wird von angular-cli ordnungsgemäß verwendet.
Fügen Sie not.map-Dateien nicht ein, da sie nur zum Debuggen verwendet werden. Wenn Sie ein Hot-Replacement-Modul verwenden, entfernen Sie es außerdem, um den Hersteller leichter zu machen.

Um für die Produktion zu packen, verwende ich persönlich Webpack (und angle-cli ist auch darauf angewiesen), da Sie wirklich configure everything zur Optimierung oder zum Debuggen verwenden können.
Wenn Sie Webpack verwenden möchten, stimme ich zu, dass es auf den ersten Blick etwas knifflig ist, aber Tutorials im Internet sehen, Sie werden nicht enttäuscht sein.
Sonst verwenden Sie angular-cli, wodurch die Arbeit wirklich gut erledigt wird.

Die Verwendung von Ahead-of-Time-Kompilierung ist für die Optimierung von Apps zwingend erforderlich, und die Angular 2-App wird auf 250 KB verkleinert.

Hier ist ein von mir erstelltes Repo ( github.com/JCornat/min-angular ), um die minimale Winkelbündelgröße zu testen, und ich erhalte 384kB. Ich bin sicher, dass es eine einfache Möglichkeit gibt, es zu optimieren.

Apropos große Apps, unter Verwendung der Konfiguration AngularClass/angle-starter , genau wie im obigen Repo, meine Bündelgröße für große Apps (150+ Komponenten) ging von 8MB (4 MB ohne Map-Dateien) an 580kB.

10
Jacques Cornat

Lodash kann einen Fehlercode in Ihr Bundle einbringen, je nachdem, wie Sie daraus importieren. Zum Beispiel:

// includes the entire package (very large)
import * as _ from 'lodash';

// depending on your buildchain, may still include the entire package
import { flatten } from 'lodash';

// imports only the code needed for `flatten`
import flatten from 'lodash-es/flatten'

Ich persönlich wollte immer noch kleinere Fußabdrücke von meinen Funktionen. Z.B. flatten kann nach der Minimierung bis zu 1.2K zu Ihrem Bundle beitragen. Ich habe also eine Sammlung vereinfachter lodash-Funktionen aufgebaut. Meine Implementierung von flatten trägt zu 50 bytes bei. Sie können es hier überprüfen, um zu sehen, ob es für Sie funktioniert: https://github.com/simontonsoftware/micro-dash

8
Eric Simonton

Bei der folgenden Lösung wird davon ausgegangen, dass Sie Ihren dist/Ordner mithilfe von nodejs bereitstellen. Bitte verwenden Sie die folgenden app.js in der Root-Ebene

const express = require('express'),http = require('http'),path = require('path'),compression = require('compression');

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));
app.use(compression()) //compressing dist folder 
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
})

const port = process.env.PORT || '4201';
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => console.log('Running at port ' + port))

Stellen Sie sicher, dass Sie Abhängigkeiten installieren.

npm install compression --save
npm install express --save;

Jetzt die App erstellen

ng build --prod --build-optimizer

Wenn Sie den Build weiter komprimieren möchten, reduzieren Sie 300kb (ungefähr) von, dann folgen Sie dem untenstehenden Prozess.

Erstellen Sie einen Ordner mit dem Namenvendorim Ordnersrcund im Herstellerordner erstellen Sie eine Dateirxjs.tsund fügen Sie den folgenden Code ein.

export {Subject} from 'rxjs/Subject';
export {Observable} from 'rxjs/Observable';
export {Subscription} from 'rxjs/Subscription';

Fügen Sie dann die folgenden Dateien in der Dateitsconfig.jsonin Ihrer Anwendung für eckige Kli hinzu. Fügen Sie dann in compilerOptions den folgenden Json hinzu:

"paths": {
      "rxjs": [
        "./vendor/rxjs.ts"
      ]
    }

Dadurch wird Ihre Build-Größe viel zu klein. In meinem Projekt habe ich die Größe von 11 MB auf 1 MB reduziert. Hoffe, es hilft

6
Renil Babu

Eine Sache, die ich teilen möchte, ist, wie importierte Bibliotheken die Größe des Dist erhöhen. Ich hatte ein Paket von angle2-moment importiert, wohingegen ich alle Datumsformatierungen vornehmen konnte, die ich unter Verwendung des standardmäßigen DatePipe benötigte, das von @ angle/common exportiert wurde.

Mit Angular2-Moment "angular2-moment": "^1.6.0",

chunk {0} polyfills.036982dc15bb5fc67cb8.bundle.js (Polyfills) 191 kB {4} [Anfang] [gerendert] Chunk {1} main.e7496551a26816427b68.bundle.js (main) 2,2 MB {3} [initial] [gerendert] chunk {2} styles.056656ed596d26ba0192.bundle.css (Stile) 69 Bytes {4} [Anfang] [gerendert] Chunk {3} Vendor.62c2cfe0ca794a5006d1.bundle.js (Vendor) 3.84 MB [initial] [gerendert] chunk {4} inline.0b9c3de53405d705e757.bundle.js (inline) 0 Bytes [Eintrag] [gerendert]

Nach dem Entfernen von Angular2-Moment und stattdessen DatePipe verwenden

chunk {0} polyfills.036982dc15bb5fc67cb8.bundle.js (Polyfills) 191 kB {4} [Anfang] [gerendert] Chunk {1} main.f2b62721788695a4655c.bundle.js (main) 2,2 MB {3} [initial] [gerendert] chunk {2} styles.056656ed596d26ba0192.bundle.css (Stile) 69 Bytes {4} [Anfang] [gerendert] Chunk {3} vendor.e1de06303258c58c9d01.bundle.js (vendor) 3,35 MB [initial] [gerendert] chunk {4} inline.3ae24861b3637391ba70.bundle.js (inline) 0 Bytes [Eintrag] [gerendert]

Beachten Sie, dass das Herstellerpaket ein halbes Megabyte reduziert hat!

Es lohnt sich zu prüfen, was Winkelpakete tun können, auch wenn Sie bereits mit einer externen Bibliothek vertraut sind.

4
kwalski

Eine weitere Möglichkeit, das Paket zu reduzieren, besteht darin, GZIP anstelle von JS zu verwenden. Wir sind von 2.6mb auf 543Ko gegangen. 

https://httpd.Apache.org/docs/2.4/mod/mod_deflate.html

2
Stefdelec

Dies hat die Größe in meinem Fall reduziert:

ng build --prod --build-optimizer --optimization

Die Größe nach dem Ausführen dieses Befehls wurde von 1,7 MB auf 1,2 MB reduziert, was jedoch für meinen Produktionszweck nicht ausreicht.

Ich arbeite auf der Facebook-Messenger-Plattform und Messenger-Apps müssen kleiner als 1 MB sein, um auf der Messenger-Plattform ausgeführt zu werden. Ich habe versucht, eine Lösung für effektives Baumschütteln zu finden, aber immer noch kein Glück.

1
Mahesh Sharma

Wenn Sie Angular 8+ verwenden und die Größe des Bundles reduzieren möchten, können Sie Ivy verwenden. Gehen Sie einfach zu src/tsconfig.app.json und fügen Sie den Parameter angularCompilerOptions hinzu, zum Beispiel:

{
  "extends": ...,
  "compilerOptions":...,
  "exclude": ...,

/* add this one */ 
  "angularCompilerOptions": {
    "enableIvy": true
  }
}
0
Rachel

Überprüfen Sie, ob Sie die Konfiguration "production" für ng build - prod haben, da diese Abkürzung für ng build --configuration = production steht. Keine Antwort hat mein Problem gelöst, da das Problem direkt vor der Bildschirm. Ich denke, das könnte durchaus üblich sein ... Ich habe die App internationalisiert, indem ich alle Konfigurationen in z. production-en. Dann habe ich mit ng build --prod gebaut, unter der Annahme, dass die Standardoptimierung verwendet wird und nahezu optimal sein sollte, aber tatsächlich wurde nur ng build ausgeführt, was zu einem 7-MB-Bundle anstelle von 250 KB führte.

0
antidote

Ich habe eine eckige 5 + -Stiefel-App (application.properties 1.3+) mit Hilfe der Komprimierung (Link weiter unten) konnte die Größe von main.bundle.ts von 2,7 MB auf 530 KB reduzieren.

Standardmäßig sind --aot und --build-optimizer im Modus --prod aktiviert. Sie müssen diese nicht separat angeben.

https://stackoverflow.com/a/28216983/9491345

0
sah1