asp.net-mvc
Regroupement et Minification

Minification

La minification permet de réduire la taille des fichiers CSS et Javascript pour accélérer les temps de téléchargement. Ce processus est effectué en supprimant tous les espaces vides, les commentaires et tout autre contenu non essentiel des fichiers.

Ce processus est effectué automatiquement lors de l'utilisation d'un objet ScriptBundle ou d'un objet StyleBundle . Si vous devez le désactiver, vous devez utiliser un objet Bundle base.

Exemple utilisant Minification

Le code suivant utilise les directives de préprocesseur pour appliquer le regroupement uniquement pendant les éditions afin de faciliter le débogage lors des non-éditions (car les fichiers non fournis sont généralement plus faciles à parcourir):

public static void RegisterBundles(BundleCollection bundles)  
{  
    #if DEBUG
        bundles.Add(new Bundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
        bundles.Add(new Bundle("~/Content/css").Include("~/Content/site.css"));  
    #else
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));  
    #endif
}

Bundles Script et Style

Voici l'extrait de code par défaut pour le fichier BundleConfig.cs.

using System.Web.Optimization;

public class BundleConfig  
{  
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725  
    public static void RegisterBundles(BundleCollection bundles)  
    {  
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(  
                    "~/Scripts/jquery-{version}.js"));  
                    
    // Use the development version of Modernizr to develop with and learn from. Then, when you're  
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.  
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(  
                "~/Scripts/modernizr-*"));  

    bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));  

    bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(  
                "~/Content/themes/base/jquery.ui.core.css",  
                "~/Content/themes/base/jquery.ui.resizable.css",  
    }  
 } 

Les bundles sont enregistrés dans le fichier Global.asax dans la méthode Application_Start ():

using System.Web.Optimization;

protected void Application_Start() 
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Les bundles doivent être rendus dans vos vues comme suit:

@using System.Web.Optimization

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/themes/base/css") 

Notez que le regroupement ne se produit pas lorsque vous êtes en mode développement (où l'élément de compilation du fichier Web.config est défini sur debug = "true"). Au lieu de cela, les instructions de rendu dans vos vues incluront chaque fichier individuel dans un format non minifié et non intégré, pour faciliter le débogage.

Une fois l'application en mode de production (où l'élément de compilation dans le fichier Web.config est défini sur debug = "false"), le regroupement aura lieu.

Cela peut entraîner des complications pour les scripts qui référencent les chemins d'accès relatifs d'autres fichiers, tels que les références aux fichiers d'icône de Twitter Bootstrap. Cela peut être résolu en utilisant la classe CssRewriteUrlTransform de System.Web.Optimization:

 bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

La classe CssRewriteUrlTransform réécrira les URL relatives dans les fichiers groupés en chemins absolus, de sorte que les références resteront intactes une fois que la référence appelante aura été déplacée vers l'emplacement du bundle (en utilisant le code ci-dessus, en partant de "~ / Content / css / bootstrap.css "à" ~ / bundles / css / bootstrap.css ").