MVC Framework - Agrupación

Bundling y Minificationson dos técnicas de mejora del rendimiento que mejoran el tiempo de carga de solicitudes de la aplicación. La mayoría de los principales navegadores actuales limitan el número de conexiones simultáneas por nombre de host a seis. Significa que, a la vez, el navegador pondrá en cola todas las solicitudes adicionales.

Habilitar agrupación y minificación

Para habilitar la agrupación y la minificación en su aplicación MVC, abra el archivo Web.config dentro de su solución. En este archivo, busque la configuración de compilación en system.web -

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

De forma predeterminada, verá el parámetro de depuración establecido en verdadero, lo que significa que la agrupación y la minificación están deshabilitadas. Establezca este parámetro en falso.

Agrupación

Para mejorar el rendimiento de la aplicación, ASP.NET MVC proporciona una función incorporada para agrupar varios archivos en un solo archivo, lo que a su vez mejora el rendimiento de carga de la página debido a menos solicitudes HTTP.

La agrupación es un grupo lógico simple de archivos al que se puede hacer referencia por un nombre único y cargar con una sola solicitud HTTP.

De forma predeterminada, el BundleConfig de la aplicación MVC (ubicado dentro de la carpeta App_Start) viene con el siguiente código:

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")); 
}

El código anterior básicamente agrupa todos los archivos CSS presentes en la carpeta Contenido / temas / base en un solo archivo.

Minificación

La minificación es otra técnica de mejora del rendimiento en la que optimiza el código javascript, CSS acortando los nombres de las variables, eliminando espacios en blanco innecesarios, saltos de línea, comentarios, etc. Esto a su vez reduce el tamaño del archivo y ayuda a que la aplicación se cargue más rápido.

Minificación con Visual Studio y Web Essentials Extension

Para usar esta opción, primero deberá instalar la Extensión Web Essentials en su Visual Studio. Después de eso, cuando haga clic con el botón derecho en cualquier archivo css o javascript, le mostrará la opción de crear una versión reducida de ese archivo.

Por lo tanto, si tiene un archivo css llamado Site.css, creará su versión reducida como Site.min.css.

Ahora, cuando la próxima vez que su aplicación se ejecute en el navegador, agrupará y minimizará todos los archivos css y js, mejorando así el rendimiento de la aplicación.