Cómo utilizar Bundles en ASP.NET.

¿Qué son los Bundles?

cabecera3Un Bundle es una agrupación de enlaces a archivos externos desde el HTML. Es algo habitual. Para evitar una tarea tan repetitiva se han creado estos Bundles, que son accesos directos a agrupaciones de este tipo de archivos. Por ejemplo, este conjunto de llamadas a scripts de javascript:

 

 


 <script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.1.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> 

Puede simplificarse a un Bundle como este:

@Scripts.Render("~/bundles/validadoresJquery")

La ventaja simplificando el código es clara. En este caso solo hay cuatro scripts, pero podría haber docenas. Además no solo se pueden agrupar scripts, sino también Hojas de estilo. La sintaxis Razor aquí es prácticamente igual, en lugar de usar @Scripts para agrupar los tags script, se usa @Styles para los link.

@Scripts.Render("~/bundles/validadoresJquery")
@Styles.Render("~/bundles/cssCabeceras")

 

¿Dónde se configuran?

Puedes crear muchos Bundles, conteniendo numerosos scripts u hojas de estilo. Todos ellos se construyen dentro del fichero BundleConfig.cs en el App_Start.

 

1

Depende de las versiones de Visual Studio y la versión de MVC, puede que este fichero no exista y tenga que crearlo. Copie y modifique el código que expongo a continuación:

 

using System.Web;
using System.Web.Optimization;
namespace MvcApplication1
{
    public class BundleConfig
    {

        public static void RegisterBundles(BundleCollection bundles)
        {

            bundles.Add(new ScriptBundle("~/bundles/validadorJQuery").Include(
                  "~/Scripts/jquery-2.1.1.*",
                  "~/Scripts/jquery.validate.*",
                  "~/Scripts/jquery-ui-1.11.1.js"));

             bundles.Add(new StyleBundle("~/Content/themes/base/ejemploCss").Include(
                   "~/Content/themes/base/jquery.ui.accordion.css",
                   "~/Content/themes/base/jquery.ui.all.css",
                   "~/Content/themes/base/jquery.ui.autocomplete.css",
                   "~/Content/themes/base/jquery.ui.base.css",
                   "~/Content/themes/base/jquery.ui.button.css",
                   "~/Content/themes/base/jquery.ui.core.css",
                   "~/Content/themes/base/jquery.ui.datepicker.css",
                   "~/Content/themes/base/jquery.ui.dialog.css",
                   "~/Content/themes/base/jquery.ui.draggable.css",
                   "~/Content/themes/base/jquery.ui.menu.css",
                   "~/Content/themes/base/jquery.ui.progressbar.css",
                   "~/Content/themes/base/jquery.ui.resizable.css"));

        }
    }
}

Añada las referencias que le falten, como pueda ser,  System.Web.Optimization.

2

Si ha tenido que crearlo de cero, deberá también añadir la llamada al fichero global.asax.cs, en el método Application_Start()

 

BundleTable.EnableOptimizations = true;
BundleConfig.RegisterBundles(BundleTable.Bundles);

 

Minification

La agrupación de múltiples scripts en apenas una o dos líneas, no es la única ventaja. La segunda es que todos estos archivos son minificados. La minificación es un tipo de compresión sin encriptación, en la que se reducen los espacios y saltos de línea entre funciones para ahorrar espacio. También se renombran los nombres de variables y métodos para hacerlos más cortos, con el mismo fin de ahorro. En esta imagen podemos ver las versiones minificada y normal de jquery 2.1.1, de jquery.validate y de jquery.validate.unobstrusive.

3

 

Observemos nuestro ejemplo al crear el Bundle, donde usamos este argumento con asterisco:

                  "~/Scripts/jquery-2.1.1.*",

Esto implica que tanto el jquery-2.1.1.js como el jquery-2.1.1.min.js se incluyen en el Bundle. ¿Cuál usa de los dos?
Pues si las optimizaciones están habilitadas, usará la versión minificada jquery-2.1.1.min.js y en caso contrario usará la versión normal, jquery-2.1.1.js, que nos será más útil a efectos de depuración.

La propiedad EnableOptimizations, permite activar o desactivar todas estas optimizaciones y como hemos visto está en el global.asax.cs

 

 protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            BundleTable.EnableOptimizations = true;

            BundleConfig.RegisterBundles(BundleTable.Bundles);
            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        }

Enlaces relacionados de interés

http://www.variablenotfound.com/2012/04/caching-de-bundles-en-mvc-4-o-mvc-3-o.html

http://geeks.ms/blogs/etomas/archive/2012/07/30/bundles-en-asp-net-mvc4.aspx

http://weblogs.asp.net/scottgu/new-bundling-and-minification-support-asp-net-4-5-series

http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

 

 

Deja un comentario