Comment compresser et optimiser une application Angular2

Question

Je veux rendre mon application angular-cli plus rapide !

Bon, alors j'ai passé un certain nombre de jours à mettre à jour mon application NG2 pour fonctionner avec angular-cli. Au début, c'était une expérience assez frustrante, cependant, je vois vraiment la lumière et j'apprécie le processus de développement. Il est clair que le framework a fait l'objet de beaucoup de travail et de réflexion.

Mais mon application est lente :

Selon Pingdom mon application est plus rapide que 21% de tous les autres sites sur Internet. Pour être honnête, il s'agit d'une application prête à l'emploi. ng construire et je suis sûr que je peux accélérer le processus de manière significative.

Ma dernière question est la suivante : comment réduire radicalement la taille d'un site Web angulaire ?

En l'état actuel des choses, l'application : fairplay.poker Il faut 7 secondes pour charger le site (si vous habitez à New York). Je suis donc certain que la plupart des gens seront passés à autre chose avant qu'il n'ait eu le temps de se charger.

Il est clair que je dois me lancer dans un voyage pour augmenter radicalement la vitesse de l'application mais j'ai besoin de votre aide ! (parce que je ne sais pas ce que je fais :)

Quelle est la pratique standard et par où commencer pour faire le tri ?

PROGRESS :

Au fur et à mesure que des suggestions seront faites, je les mettrai à jour ici.

1. @cyrix Construction suggérée pour la production : ng build -prod

Le fichier Zip a diminué de plus d'un méga et les nouvelles statistiques de Pingdom sont bien meilleures que les statistiques originales :

2. Réduction suggérée de la taille de l'image.

Certaines des images étaient un peu plus grandes qu'elles n'auraient dû l'être, elles ont donc été réduites. Ce n'est pas une amélioration majeure, mais les statistiques ont élevé le site dans le top 73% des sites ayant un temps de chargement légèrement plus rapide.

3. @yurzui a suggéré la compression gzip, je l'ai donc activée. Apparemment, cela fonctionne et la taille totale des fichiers a été réduite de plus de la moitié (609 octets), mais cela n'apparaît pas sur Pingdom. Je note que la note s'est quelque peu améliorée, cependant.

J'ai utilisé ce site pour vérifier la compression et ce site m'a montré comment faire puisque Cpanel ne semblait pas fonctionner lorsqu'il était activé depuis l'administration. Ce site semble également être un bon compression gzip ressource.

4 @Yuruzi a suggéré de mettre en place un cache de navigateur. Je l'ai donc fait !

Ce qui est vraiment intéressant, c'est l'amélioration du niveau de performance, ça déchire ! Le temps de chargement est un peu plus rapide et le site est maintenant dans le top 74%. Comme suggéré par Yuruzi, j'ai utilisé ce poste à titre indicatif.

5 Merci à @wafflej0ck sur le canal #angularjs. Il semble que j'avais besoin d'améliorer GZip, ce que j'ai fait en changeant le type de compression en "AddOutputFilterByType DEFLATE *" comme indiqué. ici .

Cela semble avoir surchargé le site :

6 Il a été suggéré d'utiliser l'AOT, j'ai donc pris une page de l'AOT. ce poste .

J'ai parcouru la majeure partie de la documentation, mais j'obtenais un tas d'erreurs et j'ai décidé de remettre cela à plus tard, en espérant que AOT soit un peu plus stable.

J'ai lu sur GitHub que Angular-Cli est livré avec AOT préinstallé et que l'article ci-dessus n'est pas pertinent. Je ne suis pas sûr de la véracité de cette affirmation, mais j'exécute la commande suivante lors de la compilation du code : ng build --prod --aot

7. J'ai modifié le fichier mod_expires.c dans le fichier htaccess.

Les performances se sont nettement améliorées, passant à 98 %. Le temps de chargement est désormais inférieur à une seconde et le site est plus rapide que 91 % des sites testés.

Le fichier ressemble actuellement à ceci :

ExpiresActive On ExpiresDefault "accès plus de 2 jours". ExpiresByType image/x-icon " accès plus 1 an ". ExpiresByType image/jpeg " accès plus 1 an ". ExpiresByType image/jpg "droit d'accès + 1 an". ExpiresByType image/png " accès + 1 an ". ExpiresByType image/gif " accès plus 1 an ". ExpiresByType application/x-shockwave-flash " accès + 1 mois ". ExpiresByType text/css " accès plus 1 mois ". ExpiresByType text/javascript " accès plus 1 mois ". ExpiresByType application/pdf " accès plus 1 mois ". ExpiresByType application/javascript " accès plus 1 semaine ". ExpiresByType application/x-javascript " accès plus 1 semaine ". ExpiresByType text/javascript " accès plus 1 semaine " ExpiresByType text/html " accès plus 600 secondes ". ExpiresByType application/xhtml+xml "accès plus 600 secondes".

À ce stade, je ne peux m'empêcher de penser que j'ai maintenant affaire à des rendements décroissants.

8. Suppression des polices et des images non utilisées qui étaient incluses dans le css.

Le temps de chargement a diminué et les performances du site sont maintenant de 100%.

9. DNS et SSL lents

J'ai remarqué qu'une bonne partie du temps de chargement était due au DNS et au SSL. Pour résoudre ce problème, j'ai ouvert un compte CloudFlare gratuit, car ils ont des nœuds à peu près partout, ce qui devrait accélérer certaines choses...

Et c'est effectivement le cas. Malheureusement, l'hôte de New York de PingDom a été supprimé, mais les statistiques de Dallas sont très prometteuses, avec un temps de chargement bien inférieur à une seconde !

D'AUTRES BONS ARTICLES

Ce type a un bon article sur l'optimisation des sites angulaires également

Answer 1

Il y a certaines choses qui vous permettent d'augmenter la vitesse de votre application, entre autres :

1. Utilisez chargement paresseux des modules chaque fois que possible ( lien )
2. construire un projet avec le profil de production
3. Utilisez En avance sur le temps (AOT) la compilation ( lien )
4. Utilisation de Angular-Universal vous permet de déplacer une partie du rendu du projet vers le côté serveur

Answer 2

Pour ceux qui sont intéressés par le fichier HTACCESS que j'utilise, le voici. Cela force https qui ralentit les choses d'environ 100ms :

#REDIRECT ROUTES TO INDEX (fixes broken routes with angular)
RewriteEngine on
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
#ENABLE GZIP COMPRESSION TO IMPROVE PERFORMANCE
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# SET EXPIRE HEADERS TO IMPROVE PERFORMANCE
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 2 days"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/javascript "access plus 2 week"
  ExpiresByType application/x-javascript "access plus 2 week"
  ExpiresByType text/javascript "access plus 2 week"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers