TP 7 : Optimisation d'une Single-Page Application

Objectifs pédagogiques du TP

Outils

Sur les machines de TP, si vous n'arrivez pas à démarrer Chromium sous Linux, essayez de supprimer le répertoire .config/chromium dans votre home directory.

À faire avant de débuter le TP : désactiver le cache et les plugins de blocage de contenus (Adblock, Ghostery...) de votre navigateur.

Les mesures effectuées dans ce TP devront être faites à partir des différentes versions de votre SPA déployées sur votre VM (pas de localhost), et de manière cohérente : pour chaque opération, il faut faire une mesure avant et après depuis le même environnement (machines de TP, wifi depuis l'intérieur de la fac, VPN).

Analyse de l'état initial de votre application

Suite au TP5, votre SPA doit être déployée sur le serveur Tomcat de votre VM, et accessible comme un ensemble de fichiers statiques. Vous allez commencer par mesurer la performance de ce déploiement.

En vous inspirant du TP précédent, réalisez un script qui mesurera :

Indiquez ces valeurs dans le readme, précédées de la mention "déploiement sur Tomcat".

Déploiement des fichiers statiques sur nginx

Dans l'état actuel de votre application, votre requête suit le chemin suivant :

  1. nginx la forwarde à Tomcat
  2. Tomcat identifie, en fonction du chemin de contexte, l'application concernée
  3. Tomcat appelle la servlet principale (routeur) de l'application
  4. le routeur déroule sa méthode de service pour déterminer à quel contrôleur déléguer il doit forwarder la requête
  5. En l'absence d'un contrôleur identifié, il la passe au contrôleur default qui sert les fichiers statiques
  6. le contrôleur default trouve le fichier dans l'arborescence des fichiers statiques webapp et le renvoie

Or il se trouve qu'à la base, nginx n'est pas qu'un proxy, mais aussi un serveur de fichiers statiques. Vous allez donc déployer votre SPA directement sur nginx, à la racine du serveur.

Réalisez les mêmes mesures qu'à la question précédente, et indiquez ces valeurs dans le readme, précédées de la mention "déploiement sur nginx".
Pour chacune de ces mesures, indiquez dans le readme son pourcentage d'amélioration ; précédez cette information de la mention "Amélioration".

Optimisation de votre application

Pour cette question, vous utiliserez l'outil d'audit de la console de Chrome/Chromium.

Remarque : si vous avez une erreur de certificat dans Chrome/Chromium ERR_CERT_COMMON_NAME_INVALID, il faut lancer l'exécutable en ligne de commande avec l'option --ignore-certificate-errors. Sous Windows, ouvrez un PowerShell dans le répertoire contenant le fichier chrome.exe ; sous MacOS, dans celui contenant 'Google Chrome' ; sous Linux, lancer 'google-chrome'.
Attention : ne modifez pas la configuration de votre machine (raccourci) pour lancer automatiquement le navigateur en ignorant les problèmes de sécurité !

Générez un rapport d'audit de votre SPA. En fonction des résultats du rapport, améliorez la performance de votre application sur les points suivants :

Pour chaque modification apportée :

Rendu du TP

La dernière version du code de votre SPA est à pusher sur la forge pour le dimanche 22 décembre 2019 à 23h59. Suite aux différentes opérations demandées dans ce TP, ce code aura nécessairement été déployé sur votre VM.

Vous ajouterez sur le readme de votre projet forge :

Licence Creative Commons
Valid XHTML 1.0 Strict