Il nous reste encore une dernière étape pour obtenir une application qui s’approche du modèle MVC des outils de développement pour .NET Core.
Si vous venez de prendre le train, je vous conseille de lire les parties précédentes de cette série :
- partie 1 : introduction et mise en place du patron de conception MVC ;
- partie 2 : transfert de données entre le contrôleur et la vue ;
- partie 3 : gestion des packages front-end et Layout.
Dans cette partie, nous verrons comment la gestion des performances est effectuée dans ce modèle en utilisant le regroupement et la minification.
Introduction
Les performances ont un impact non négligeable sur l’expérience utilisateur et même sur le référencement naturel. Plus les pages de votre site se chargent rapidement, plus l'expérience de navigation est fluide et plus les utilisateurs sont contents.
Pour améliorer les performances d'une application, les développeurs ont recours à plusieurs techniques d'optimisation côté client et côté serveur. Parmi ces techniques, on peut citer entre autres la mise en cache, l'optimisation des images, la compression et la minification du CSS et JavaScript, le regroupement des fichiers JavaScript et CSS, les CDN, etc.
Utilisation de la minification
Pour que le code JavaScript et CSS soit facilement interprétable par les développeurs, on y retrouve des commentaires, des espaces, des annotations, etc. Ces éléments ne sont d’aucune utilité pour les moteurs JavaScript et de rendu des navigateurs. Pourtant, ils augmentent considérablement la taille des fichiers.
La minification consiste en la suppression des éléments inutiles dans un fichier JavaScript ou CSS, pour ne garder que le code qui sera interprété par les navigateurs. Le fichier qui en résulte est difficilement interprétable pour l’humain. Mais, ce dernier est beaucoup plus léger.
Prenons le code JavaScript suivant :
| Code javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 | AddAltToImg = function (imageTagAndImageID, imageContext) { ///<signature> ///<summary> Adds an alt tab to the image // </summary> //<param name="imgElement" type="String">The image selector.</param> //<param name="ContextForImage" type="String">The image context.</param> ///</signature> var imageElement = $(imageTagAndImageID, imageContext); imageElement.attr('alt', imageElement.attr('id').replace(/ID/, '')); } |
Après minification, on obtient le résultat suivant :
| Code javascript : | Sélectionner tout |
AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};
En plus de la suppression des commentaires et des espaces, les variables et paramètres ont été renommés pour rendre ceux-ci plus courts.
Configuration de la minification dans une application ASP.NET Core
Pour mettre en place la minification dans une application ASP.NET Core, nous allons utiliser le package BuildBundlerMinifier et un fichier de configuration.
Pour installer le package, vous pouvez exécuter la commande suivante, à partir du terminal intégré :
| Code : | Sélectionner tout |
dotnet add package BuildBundlerMinifier
Une fois le package installé, nous pouvons créer le fichier de configuration bundleconfig.json à la racine de notre site Web.
Dans ce fichier, nous aurons la configuration suivante :
| Code json : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | [ { "outputFileName": "wwwroot/css/site.min.css", // An array of relative input file paths. Globbing patterns supported "inputFiles": [ "wwwroot/css/site.css" ] }, { "outputFileName": "wwwroot/js/site.min.js", "inputFiles": [ "wwwroot/js/site.js" ], // Optionally specify minification options "minify": { "enabled": true, "renameLocals": true }, // Optionally generate .map file "sourceMap": false } ] |
Dans ce fichier, nous devons simplement dans la section inputFiles, spécifier le chemin du fichier à minifier et dans outputFileName, l’emplacement et le nom du fichier minifié qui sera généré.
Une fois ceci fait, exécutez la commande
| Code : | Sélectionner tout |
Dotnet build
Vous verrez un nouveau fichier site.min.css dans votre application. Nous n’avons pas de fichier site.js, d’où l’affichage du message d’erreur.
Le contenu du fichier site.min.css est le suivant :
| Code css : | Sélectionner tout |
body{padding-top:50px;padding-bottom:20px}.body-content{padding-left:15px;padding-right:15px}input,select,textarea{max-width:280px}.carousel-caption p{font-size:20px;line-height:1.4}.carousel-inner .item img[src$=".svg"]{width:100%}@media screen and (max-width:767px){.carousel-caption{display:none}}
Évaluons maintenant l’impact sur note application. Nous allons utiliser l’extension YSlow sous le navigateur Chrome. Il fonctionne également sur Firefox et Internet Explorer.
L’exécution de l’application sans la mise en place de la minification donne le résultat suivant :
Nous allons maintenant référencer le fichier minifié dans la page. Nous allons aussi profiter de l’occasion pour utiliser les fichiers minifiés fournis pour Bootstrap et jQuery :
| Code html : | Sélectionner tout |
1 2 3 4 | <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/css/site.min.css" /> <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script> |
Après exécution de l’application, on obtient le résultat suivant :
Soit une réduction de plus de 50 % de la taille des fichiers JavaScript.
Regroupement
Il est plus pratique, d'un point de vue développement et maintenance, de disposer de plusieurs fichiers de petite taille.
Selon le fonctionnement du protocole HTTP, pour chaque fichier appelé depuis une page (JavaScript, CSS, images, etc.), le navigateur va faire une demande au serveur et attendre une réponse. Bien que les navigateurs autorisent des connexions simultanées sur un même domaine pour réduire le temps de latence, des limites sont néanmoins imposées par ceux-ci. Voici les limites pour quelques navigateurs :
- Internet Explorer : six connexions simultanées par domaine ;
- Firefox : six connexions simultanées par domaine ;
- Chrome : six connexions simultanées par domaine ;
- Safari : quatre connexions simultanées par domaine.
Si vous disposez par exemple de treize fichiers CSS dans votre page et que vous utilisez Internet Explorer, votre navigateur va bloquer trois fois, chargeant simultanément six fichiers et mettant les autres en attente.
Le regroupement est une technique qui permet de combiner plusieurs fichiers JavaScript et CSS en un seul fichier, pour réduire le nombre d'éléments à télécharger, et de ce fait le nombre de requêtes HTTP du navigateur.
Pour regrouper des fichiers dans un seul fichier minifié, vous devez simplement spécifier dans inputFiles la liste de vos fichiers séparés par une virgule :
| Code json : | Sélectionner tout |
1 2 3 4 5 6 7 | { "outputFileName": "wwwroot/css/site.min.css", "inputFiles": [ "wwwroot/css/site.css", "wwwroot/css/custom.css" ] } |
Utilisation des CDN
Pour gagner en performance, il est courant d’utiliser les CDN dans une application Web pour le stockage des fichiers statiques. Le CDN est un réseau de diffusion de contenu optimisé pour le rendu rapide des contenus statiques. Les frameworks JavaScript et CSS populaires, notamment Bootstrap et jQuery sont hébergés sur des CDN et peuvent directement être exploitées dans une page Web.
Microsoft Ajax Content Delivery Network est un CDN gratuit offert par Microsoft. C’est ce CDN qui est utilisé pour le modèle MVC des applications ASP.NET Core.
Grâce aux Tag Helper qu’apporte ASP.NET Core, le développeur bénéficie de beaucoup plus de souplesse pour la gestion des CDN et des fichiers minifés.
En environnement de développement, le développeur a besoin d’utiliser des fichiers locaux qu’il peut éventuellement modifier ou débogueur. Par contre en environnement de production, les fichiers minifés et les CDN entrent en action pour gagner en performance.
Les Tag Helper Environment, Script et Link sont à la disposition du développeur pour exploiter de façon optimale les CDN et la minification.
Ci-dessous le code final du Layout après prise en compte de la minification et des CDN :
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - TestApp</title> <!-- En environnement de Dev on utilise les fichiers locaux --> <environment names="Development"> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <!-- CSS personnalisé --> <link rel="stylesheet" href="~/css/site.css" /> </environment> <!-- En environnement de Préproduction et Production on utilise les CDN --> <environment names="Staging,Production"> <!-- CDN Bootstrap --> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> <!-- CSS personnalisé minifié--> <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /> </environment> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Blog.Web</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li> <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li> <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li> </ul> </div> </div> </nav> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© 2017 - TestApp</p> </footer> </div> <!-- En environnement de Dev on utilise les fichiers locaux --> <environment names="Development"> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> </environment> <!-- En environnement de Préproduction et Production on utilise les CDN --> <environment names="Staging,Production"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous" integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk"> </script> <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"> </script> </environment> @RenderSection("Scripts", required: false) </body> </html> |
Puisque nous utilisons désormais des TagHelpers, nous devons ajouter une référence dans nos vues pour importer l’espace de nommage correspondant. Pour ne pas avoir à le faire dans toutes les vues, nous allons créer un fichier _ViewImports.cshtml dans le dossier Views avec le contenu suivant :
| Code : | Sélectionner tout |
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Bon coding 😉