web-dev-qa-db-fra.com

Charge de page initiale angulaire2 lente causée par la séquence de chargement

J'ai un projet angular2 créé à partir de seed et j'ai ajouté plusieurs composants angulaires sur ma page initiale. Certains d'entre eux chargent des images - ce qui est relativement lent, mais le problème est le suivant:

  1. J'ai un paquet qui est gros (~ 1mb) et j'y travaille actuellement pour le rendre plus petit en suivant un guide sur le sujet . 
  2. Le chargement initial ne génère que quelques requêtes, charge le paquet (généralement environ 3 secondes) et attend que l'application Angular lance une amorce (environ 1,4 seconde). Après cela, il commence à charger tous les composants et à charger leurs ressources (polices, images, etc.). Voici à quoi ressemble la demande:

 enter image description here

Même après avoir réduit la taille du paquet, je crains que l'application ne démarre toujours pendant 1,5 seconde sans faire de demande, puis attendez à nouveau environ 1 seconde pour le chargement des ressources des composants. Je suppose que cela entraînera environ 3 secondes de temps de chargement. Mon application étant relativement simple, j'ai trouvé cela inacceptable.

Q1: Existe-t-il un moyen de charger les ressources du composant plus tôt et de simplement les référencer lors du chargement du composant?

Q2: Est-il possible d'accélérer le démarrage de l'application?

Je suis ouvert à d'autres suggestions aussi :)

Modifier:

J'utilise la compilation AoT, fournie avec la graine et j'ai pris des mesures pour réduire la taille du fichier app.js. Le problème persiste avec le gap entre la fin du app.js téléchargé et les appels de ressources du premier composant .  enter image description here

MISE À JOUR (2016-12-19):

Ce que j'ai fait (pour l'instant) est uniquement sur le serveur:

  • Activation de la prise en charge de HTTP2 qui a entraîné une amélioration majeure de la vitesse.
  • Activé GZIP qui a réduit la taille du JS de plus de 5 fois.

Ces configurations de serveur étaient triviales sur NGINX et Apache, il valait donc la peine de les essayer.

Maintenant, bien que le site se charge beaucoup plus rapidement, ces modifications ne résolvent pas les problèmes initiaux (Problème 1 et Problème 2). Par conséquent, je suis à la recherche d’autres approches que vous voudrez peut-être également suivre si vous êtes à ma place:

MISE À JOUR (2018-06-11):

Voici quelques matériaux qui m'ont aidé à augmenter la charge initiale:

Dans mon cas, le chargement paresseux joue un rôle important.

performanceangularload
14
nyxz

Q2: Vous pouvez accélérer le démarrage de l’application et réduire la taille de l’ensemble en implémentant la compilation Ahead of Time: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Les modèles sont précompilés et tous les scripts sont préalablement générés, ce qui réduit le temps de traitement après le chargement initial. De plus, le compilateur Angular 2 n'est pas inclus dans votre paquet, ce qui devrait réduire considérablement la taille du paquet lui-même.

Q1: Il existe un support de chargement paresseux des composants, mais je n’ai pas cherché à comprendre ce qu’il implique. Quelqu'un d’autre pourrait peut-être répondre à cette question pour vous.

4
silentsod

en tenant compte également de la réduction/de l’assemblage du js, activer gzip compression au niveau du serveur réduira le temps de chargement.

0
RamiReddy P