Code .Net: Utilisation Bundling et minification ASP.NET 4 WebForms

lundi 8 décembre 2014

Utilisation Bundling et minification ASP.NET 4 WebForms

Bundling et Minification sont deux techniques que vous pouvez utiliser dans ASP.NET 4 pour améliorer la performance. Bundling et Minification améliore le temps de chargement en réduisant le nombre de requêtes vers le serveur.

Bundling vous permet de combiner plusieurs JavaScript ou CSS fichiers en un seul package.

Minify réduise le nombre de requêtes HTTP que les navigateurs ont à faire, ce qui réduit la taille des fichiers, et améliorer la performance de l'ensemble du site.

Ajouter de référence à la bibliothèque System.Web.Optimization:

System.Web.Optimization n'est pas une partie du FrameWork .NET 4 . Mais vous pouvez l'ajouter avec NuGet Package.

Pour lancer NuGet Package Boutton droite sur le projet => Manage NuGet Package

Rechercher et installer Microsoft.AspNet.Web.Optimization sur NuGet Package

Les nouveau Références ajoutés :

Création des Bundles:

Créer un dossier App_Start (si n'exist pas)
Créer un classe BundleConfig sur le dossier App_Start.

Script et CSS Bundles

Ici on crée un bundles pour le fichier jquery-1.7.1.js et le fichier site.css

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace Bundles_Minification
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {

            bundles.Add(new ScriptBundle("~/bundles/js").Include(
                "~/Scripts/jquery-1.7.1.js"));
            bundles.Add(new StyleBundle("~/Styles/css").Include("~/Styles/site.css"));
        }
    }
}

3. Aller sur le fichier Global.asax puis modifier la fonction Application_Start
inscrire les bundles :

  void Application_Start(object sender, EventArgs e)
        {
            // Code that runs on application startup
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }

4. Maintenant, vous pouvez ajouter le style et les scripts bundles que vous avez créés ci-dessus à la page comme indiqué ci-dessous:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo.aspx.cs" Inherits="Bundles_Minification.demo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <asp:PlaceHolder ID="PlaceHolder1" runat="server">     
          <%: Scripts.Render("~/bundles/js") %>

          <%: Styles.Render("~/Styles/css") %> 
    </asp:PlaceHolder> 
</head>
<body class="maroonbg">
    <form id="form1" runat="server">
    <div>
            Demo utilisation Bundling et Minifiation ASP.NET 4 WebForms
    </div>
    </form>
</body>
</html>

Notes:

    Vous devez activer le mode debug sur le web.config et ajouter ces namesspaces:

<system.web>
    <compilation debug="true" targetFramework="4.5.3" />
    <httpRuntime targetFramework="4.5.3" />
    <pages>
      <namespaces>
        <add namespace="System.Web.Optimization" />
      </namespaces>
      <controls>
        <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt" />
      </controls>
    </pages>
  </system.web>

Code source : Bundling_Minification_Asp.netVS2012

Code .Net

lundi 8 décembre 2014

Utilisation Bundling et minification ASP.NET 4 WebForms

Ajouter de référence à la bibliothèque System.Web.Optimization:

Création des Bundles:

Aucun commentaire:

Enregistrer un commentaire