Regrouper et minifier des ressources statiques dans ASP.NET Core

Par Scott Addie et David Pine

Cet article explique les avantages du regroupement et de la minimisation, notamment la façon dont ces fonctionnalités peuvent être utilisées avec des applications web ASP.NET Core.

Qu’est-ce que le regroupement et la minimisation

Le regroupement et la minimisation sont deux optimisations des performances distinctes qu’il est possible d’appliquer dans une application web. Utilisés ensemble, le regroupement et la minimisation améliorent les performances en réduisant le nombre de requêtes du serveur et en réduisant la taille des ressources statiques demandées.

Le regroupement et la minimisation améliorent principalement le temps de chargement de la demande de la première page. Une fois qu’une page web a été demandée, le navigateur met en cache les ressources statiques (JavaScript, CSS et images). Ainsi, le regroupement et la minimisation n’améliorent pas les performances lors de la demande de la même page, ou des mêmes pages, sur le même site demandant les mêmes ressources. Si l’en-tête d’expiration n’est pas défini correctement sur les ressources et si le regroupement et la minimisation ne sont pas utilisés, l’heuristique d’actualisation du navigateur marque les ressources comme étant obsolètes après quelques jours. En outre, le navigateur nécessite une demande de validation pour chaque ressource. Dans ce cas, le regroupement et la minimisation permettent d’améliorer les performances même après la demande de la première page.

Regroupement

Le regroupement consiste à combiner plusieurs fichiers en un seul. Le regroupement réduit le nombre de requêtes du serveur nécessaires pour afficher une ressource web, telle qu’une page web. Vous pouvez créer n’importe quel nombre de regroupements individuels spécifiquement pour CSS, JavaScript, etc. Moins de fichiers signifie moins de requêtes HTTP du navigateur vers le serveur ou du service qui fournit votre application. Cela permet d’améliorer les performances de chargement de la première page.

Minimisation

La minimisation supprime les caractères inutiles du code sans dégrader les fonctionnalités. Le résultat est une réduction significative de la taille des ressources demandées (fichiers CSS, images et JavaScript par exemple). Les effets secondaires courants de la minification incluent le raccourcissement des noms de variables à un caractère et la suppression des commentaires et des espaces blancs inutiles.

Considérez la fonction JavaScript suivante :

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/, ''));
}

La minimisation réduit la fonction comme suit :

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

En plus de supprimer les commentaires et les espaces blancs inutiles, les noms de paramètres et de variables suivants ont été renommés comme suit :

Original	Renamed
imageTagAndImageID	t
imageContext	a
imageElement	r

Impact du regroupement et de la minimisation

Le tableau suivant présente les différences entre le chargement individuel des ressources et l’utilisation du regroupement et de la minimisation pour une application web classique.

Action	Sans B/M	Avec B/M	Réduction
Demandes de fichiers	18	7	61%
Octets transférés (Ko)	265	156	41 %
Temps de chargement (ms)	2360	885	63 %

Le temps de chargement s’est amélioré, mais cet exemple a été exécuté localement. Des gains de performances plus importants sont réalisés lors de l’utilisation du regroupement et de la minimisation avec des ressources transférées sur un réseau.

L’application de test utilisée pour générer les chiffres du tableau précédent illustre des améliorations classiques qui peuvent ne pas s’appliquer à une application donnée. Nous vous recommandons de tester une application pour déterminer si le regroupement et la minimisation améliorent le temps de chargement.

Choisir une stratégie de regroupement et de minimisation

ASP.NET Core est compatible avec WebOptimizer, une solution de regroupement et de minimisation open source. Pour obtenir des instructions de configuration et des exemples de projets, consultez WebOptimizer. ASP.NET Core ne fournit pas de solution de regroupement et de minimisation native.

Des outils tiers, tels que Gulp et Webpack, fournissent une automatisation du flux de travail pour le regroupement et la minimisation, ainsi que le linting et l’optimisation des images. À l’aide du regroupement et de la minimisation, les fichiers minifiés sont créés avant le déploiement de l’application. Le regroupement et la minimisation avant le déploiement offrent l’avantage d’une charge de serveur réduite. Toutefois, il est important de reconnaître que le regroupement et la minimisation augmentent la complexité de la génération et ne fonctionnent qu’avec des fichiers statiques.

Regroupement et minimisation basés sur l’environnement

Il est recommandé d’utiliser les fichiers groupés et minimisés de votre application dans un environnement de production. Pendant le développement, les fichiers d’origine facilitent le débogage de l’application.

Spécifiez les fichiers à inclure dans vos pages à l’aide du Tag Helper Environment dans vos vues. Le Tag Helper Environment affiche uniquement son contenu lors de l’exécution dans des environnements spécifiques.

La balise environment suivante affiche les fichiers CSS non traités lors de l’exécution dans l’environnement Development :

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

La balise environment suivante affiche les fichiers CSS groupés et minifiés lors de l’exécution dans un environnement autre que Development. Par exemple, l’exécution dans Production ou Staging déclenche l’affichage de ces feuilles de style :

<environment exclude="Development">
    <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" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Ressources supplémentaires

• Utiliser plusieurs environnements
• Tag Helpers