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

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 :)

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.

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

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

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.

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

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.

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
  }
}

Ü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.

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