Framework MVC - Regroupement

Bundling et Minificationsont deux techniques d'amélioration des performances qui améliorent le temps de chargement des requêtes de l'application. La plupart des principaux navigateurs actuels limitent le nombre de connexions simultanées par nom d'hôte à six. Cela signifie qu'à la fois, toutes les demandes supplémentaires seront mises en file d'attente par le navigateur.

Activer le regroupement et la minification

Pour activer le regroupement et la minification dans votre application MVC, ouvrez le fichier Web.config dans votre solution. Dans ce fichier, recherchez les paramètres de compilation sous system.web -

<system.web>
   <compilation debug = "true" />
</system.web>

Par défaut, vous verrez le paramètre de débogage défini sur true, ce qui signifie que le regroupement et la minification sont désactivés. Définissez ce paramètre sur false.

Regroupement

Pour améliorer les performances de l'application, ASP.NET MVC fournit une fonctionnalité intégrée permettant de regrouper plusieurs fichiers en un seul fichier, ce qui améliore les performances de chargement de la page en raison du nombre réduit de requêtes HTTP.

Le regroupement est un simple groupe logique de fichiers qui peuvent être référencés par un nom unique et chargés avec une seule requête HTTP.

Par défaut, BundleConfig de l'application MVC (situé dans le dossier App_Start) est livré avec le code suivant -

public static void RegisterBundles(BundleCollection bundles) { 
   
   // Following is the sample code to bundle all the css files in the project         
   
   // The code to bundle other javascript files will also be similar to this 
  
   bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( 
      "~/Content/themes/base/jquery.ui.core.css", 
      "~/Content/themes/base/jquery.ui.tabs.css", 
      "~/Content/themes/base/jquery.ui.datepicker.css",  
      "~/Content/themes/base/jquery.ui.progressbar.css", 
      "~/Content/themes/base/jquery.ui.theme.css")); 
}

Le code ci-dessus regroupe essentiellement tous les fichiers CSS présents dans le dossier Content / themes / base dans un seul fichier.

Minification

La minification est une autre technique d'amélioration des performances dans laquelle elle optimise le javascript, le code css en raccourcissant les noms des variables, en supprimant les espaces blancs inutiles, les sauts de ligne, les commentaires, etc. Cela réduit à son tour la taille du fichier et aide l'application à se charger plus rapidement.

Minification avec Visual Studio et l'extension Web Essentials

Pour utiliser cette option, vous devrez d'abord installer l'extension Web Essentials dans votre Visual Studio. Après cela, lorsque vous cliquerez avec le bouton droit sur un fichier css ou javascript, il vous montrera l'option de créer une version minifiée de ce fichier.

Ainsi, si vous avez un fichier css nommé Site.css, il créera sa version minifiée en tant que Site.min.css.

Désormais, la prochaine fois que votre application s'exécutera dans le navigateur, elle regroupera et minimisera tous les fichiers css et js, améliorant ainsi les performances de l'application.