156 votes

Angular2 CLI bundle bundle énorme: comment améliorer la taille de prod?

J'ai une application simple, initialisé par l' angular-cli.

L'affichage de certaines pages par rapport à 3 voies. J'ai 3 composants. Sur celui de cette page j'utilise lodash et Angular2 Http modules pour obtenir certaines données (à l'aide de Rxjs Observables, d'une carte et de vous abonner). Je l'affichage de ces éléments à l'aide d'un simple ngFor.

Mais, malgré le fait que mon application est vraiment simple, je reçois un ÉNORME (à mon avis) paquet et des cartes. Je ne parle pas de gzip versions, mais bien la taille avant de gzipping. Cette question est une des recommandations générales demander.

Certains résultats des tests:

ng construire

Hash: 8efac7d6208adb8641c1 Temps: 10129ms morceau {0} main.bundle.js, principal.bundle.carte (principale) 18.7 kB {3} [initial] [rendu]

bloc {1} styles.bundle.css, de styles.bundle.carte, styles.bundle.carte (les styles) 155 ko {4} [initial] [rendu]

morceau de {2} scripts.bundle.js des scripts.bundle.carte (scripts) 128 ko {4} [initial] [rendu]

bloc {3} vendor.bundle.js, vendeur.bundle.carte (vendeur) 3.96 MB [initial] [rendu]

bloc {4} inline.bundle.js en ligne.bundle.carte (inline) 0 octets [entrée] [rendu]

Attendre: 10 mo vendeur paquet pour une application simple?

ng build --prod

Hash: 09a5f095e33b2980e7cc Temps: 23455ms morceau {0} principal.6273b0f04a07a1c2ad6c.bundle.js, principal.6273b0f04a07a1c2ad6c.bundle.carte (principale) 18.3 kB {3} [initial] [rendu]

bloc {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css, styles.bfdaa4d8a4eb2d0cb019.bundle.carte, styles.bfdaa4d8a4eb2d0cb019.bundle.carte (styles) 154 kB {4} [initial] [rendu]

morceau de {2} scripts.c5b720a078e5464ec211.bundle.js, les scripts.c5b720a078e5464ec211.bundle.carte (scripts) 128 ko {4} [initial] [rendu]

bloc {3} vendor.07af2467307e17d85438.bundle.js, le fournisseur.07af2467307e17d85438.bundle.carte (vendeur) 3.96 MB [initial] [rendu]

bloc {4} inline.a345391d459797f81820.bundle.js, inline.a345391d459797f81820.bundle.carte (inline) 0 octets [entrée] [rendu]

Attendre de nouveau: une telle similaire fournisseur de liasses pour la prod?

ng build --prod --aot

Hash: 517e4425ff872bbe3e5b Temps: 22856ms morceau {0} principal.95eadabace554e3c2b43.bundle.js, principal.95eadabace554e3c2b43.bundle.carte (principale) de 130 ko {3} [initial] [rendu]

bloc {1} styles.e53a388ae1dd2b7f5434.bundle.css, styles.e53a388ae1dd2b7f5434.bundle.carte, styles.e53a388ae1dd2b7f5434.bundle.carte (styles) 154 kB {4} [initial] [rendu]

morceau de {2} scripts.e5c2c90547f3168a7564.bundle.js, les scripts.e5c2c90547f3168a7564.bundle.carte (scripts) 128 ko {4} [initial] [rendu]

bloc {3} vendor.41a6c1f57136df286f14.bundle.js, le fournisseur.41a6c1f57136df286f14.bundle.carte (vendeur) 2.75 MB [initial] [rendu]

bloc {4} inline.97c0403c57a46c6a7920.bundle.js, inline.97c0403c57a46c6a7920.bundle.carte (inline) 0 octets [entrée] [rendu]

ng build --aot

Hash: 040cc91df4df5ffc3c3f Temps: 11011ms morceau {0} main.bundle.js, principal.bundle.carte (principale) de 130 ko {3} [initial] [rendu]

bloc {1} styles.bundle.css, de styles.bundle.carte, styles.bundle.carte (les styles) 155 ko {4} [initial] [rendu]

morceau de {2} scripts.bundle.js des scripts.bundle.carte (scripts) 128 ko {4} [initial] [rendu]

bloc {3} vendor.bundle.js, vendeur.bundle.carte (vendeur) 2.75 MB [initial] [rendu]

bloc {4} inline.bundle.js en ligne.bundle.carte (inline) 0 octets [entrée] [rendu]

Donc quelques questions pour le déploiement de mon application sur prod:

  • Pourquoi le vendeur bundles si énorme?
  • Est arbre secouant correctement utilisé par angulaires-cli?
  • comment améliorer ce bundle taille?
  • Sont la .carte fichiers nécessaires?
  • Sont les fonctionnalités de test inclus dans les paquets? Je n'ai pas besoin d'eux en prod.
  • Générique de la question: quels sont les publics des outils pack pour la prod? Peut-être angulaires-cli (à l'aide de webpack dans le fond) n'est pas le mieux adapté? Peut mwe faire de PLUS?

J'ai cherché de nombreuses discussions sur Stack Overflow, mais je ne trouve pas du tout question générique.

84voto

Jack Clancy Points 636

Mise À Jour Octobre 2018

Depuis cette réponse a eu beaucoup de traction, j'ai pensé qu'il serait mieux de le mettre à jour avec les nouveaux Angulaire optimisations:

  1. Comme un autre répondeur dit, ng build --prod --build-optimizer est une bonne option pour les personnes utilisant moins de Angulaire v5. Pour les versions plus récentes, ce qui est fait par défaut avec ng build --prod
  2. Une autre option est d'utiliser le module de segmentation/chargement paresseux pour mieux diviser votre application en petits morceaux
  3. Ivy moteur de rendu, tout n'est pas dans la production de encore, va bientôt offrir un meilleur bundle tailles
  4. Assurez-vous que votre 3ème partie deps sont arbre shakeable. Si vous n'utilisez pas Rxjs v6 encore, vous devriez être.
  5. Si tout le reste échoue, utilisez un outil comme webpack-bundle-analyseur pour voir ce qui est à l'origine de ballonnements dans vos modules

Certaines revendications que l'utilisation de AOT compilation peut réduire le vendeur de liasses de 250kb. Cependant, dans BlackHoleGalaxy exemple, il utilise AOT compilation et est toujours à gauche avec un fournisseur de liasses de 2,75 MO avec ng build --prod --aot, 10 fois plus important que la supposée 250kb. Ce n'est pas hors de la norme pour angular2 applications, même si vous utilisez v4.0. 2.75 MB est encore trop grande pour quelqu'un qui se soucie vraiment de la performance, surtout sur un appareil mobile.

Il ya quelques choses que vous pouvez faire pour aider à la performance de votre application:

1) l'AOT et l'Arbre des tremblements (angulaires-cli est-ce à la sortie de la boîte)

2) à l'Aide Angulaire Universelle A. K. A. rendu côté serveur (pas dans l'interface de ligne)

3) des Web workers (encore une fois, pas dans la cli, mais une très grande demande de fonctionnalité)
voir: https://github.com/angular/angular-cli/issues/2305

4) Les Travailleurs Des Services
voir: https://github.com/angular/angular-cli/issues/4006

Vous ne pouvez pas besoin de tous ces éléments dans une seule application, mais ce sont certaines des options qui sont actuellement présents pour l'optimisation Angulaire de la performance. Je pense/espère que Google est au courant de la sortie de la boîte lacunes en termes de performance et des plans pour améliorer à l'avenir.

Voici une référence qui parle plus en profondeur sur certains des concepts que j'ai mentionné ci-dessus:

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

24voto

Shubhendu Vaid Points 442

Utiliser les dernières angulaire de la version cli et utilisez la commande ng build --prod --build-optimizer Il va certainement réduire la taille de construction pour la prod env.

C'est ce que l'accumulation de l'optimiseur n'sous le capot:

La construction de l'optimiseur a deux tâches principales. Tout d'abord, nous sommes en mesure de marquer les parties de votre application en tant que pure,ce qui améliore l'arbre secouant fournis par les outils existants, en supprimant d'autres parties de votre application qui ne sont pas nécessaires.

La deuxième chose que l'accumulation de l'optimiseur n'est à retirer Angulaire décorateurs à partir de votre application d'exécution du code. Les décorateurs sont utilisés par le compilateur, et ne sont pas nécessaires lors de l'exécution et peut être supprimée. Chacun de ces emplois, de réduire la taille de votre JavaScript faisceaux, et d'augmenter la vitesse de démarrage de votre application pour vos utilisateurs.

Remarque : Une mise à jour pour Angulaires 5, le ng build --prod automatiquement prendre en charge des processus ci-dessus :)

17voto

Eric Simonton Points 580

Lodash peut contribuer à un bug de chunk de code à votre faisceau en fonction de la façon dont vous importez à partir d'elle. Par exemple:

// 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'

Personnellement, j'en voulais encore plus petites empreintes de mes fonctions de l'utilitaire. E. g. flatten peut contribuer jusqu'à 1.2K pour votre paquet, après la minimisation. J'ai donc été de créer une collection d'simplifié lodash fonctions. Mon implémentation flatten contribue pour environ 50 bytes. Vous pouvez le vérifier ici pour voir si cela fonctionne pour vous: https://github.com/simontonsoftware/micro-dash

12voto

Jacques Cornat Points 1017

Tout d'abord, le vendeur faisceaux sont énormes, tout simplement parce Angulaire 2 s'appuie sur un grand nombre de bibliothèques. La taille minimale Angulaire 2 app est d'environ 500KO (250KB dans certains cas, voir en bas de post).
Arbre en secouant est correctement utilisée par angular-cli.
Ne pas inclure .map des fichiers, car utilisé uniquement à des fins de débogage. En outre, si vous utilisez remplacement à chaud du module, de le supprimer pour alléger le vendeur.

De pack pour la production, personnellement, je utiliser Webpack (et angulaire-cli s'appuie sur elle trop), parce que vous pouvez vraiment configure everything d'optimisation ou de débogage.
Si vous souhaitez utiliser Webpack, je suis d'accord c'est un peu délicat, un premier point de vue, mais voir des tutoriels sur le net, vous ne serez pas déçu.
Sinon, utilisez angular-cli, ce qui faire le travail très bien.

En utilisant l'Avance de temps de compilation est obligatoire afin d'optimiser les applications et psy Angulaire 2 application à 250KB.

Voici un repo j'ai créé (github.com/JCornat/min-angular) pour tester minimale Angulaire de liasses, et je obtenir 384kB. Je suis sûr qu'il y est une bonne façon de l'optimiser.

Parle de gros des applications, à l'aide de la AngularClass/angulaire de démarreur de configuration, la même que dans l'opération ci-dessus, mon bundle taille pour les grandes applications (150+ composants) est passé de 8 MO (4 MO sans les fichiers de mappage) à 580kB.

8voto

Renil Babu Points 470

La solution suivante suppose que vous êtes au service de votre dist/ dossier à l'aide de nodejs. Veuillez utiliser les informations suivantes app.js au niveau de la racine

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

Assurez-vous que vous installez les dépendances;

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

Maintenant construire l'application

ng build --prod --build-optimizer

Si vous souhaitez compresser le construire-dire de réduire de 300 ko(environ) à partir , puis suivez les étapes ci-dessous;

Créez un dossier appelé vendor à l'intérieur de l' src le dossier et à l'intérieur de fournisseur de dossier, créez un fichier rxjs.ts et de coller le code ci-dessous;

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

Puis ajouter le follwing dans l' tsconfig.json le fichier dans votre angulaires-cli application. Puis dans l' compilerOptions ,, ajoutez le code json;

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

Cela rendra votre manière de taille trop petit. Dans mon projet, j'ai réduit la taille de 11mo à 1 mo. J'espère que ça aide

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X