Paquete de marco MVC

El MVC nos proporciona las dos funciones para reducir la cantidad de requests para acceder al archivo de recursos en el servidor, es decir, Agrupación y Minificación.

La agrupación es una de las características de MVC. Al implementar esto, podemos mejorar el tiempo de carga de la solicitud de rendimiento. La minificación es el proceso de eliminar datos innecesarios sin cambiar su funcionalidad, como eliminar espacios en blanco, comentarios, convertir los nombres de variables grandes en pequeños, etc. Hace que el archivo sea más pequeño para que tarde menos en cargarlo.

El espacio de nombres System.Web.Optimization proporciona el enfoque de agrupación en ASP.NET MVC que está presente en el ensamblado Microsoft.Web.Optimization . 

Para implementar la agrupación en la aplicación, debe agregar esta DLL como referencia en su proyecto mediante System.Web.Optimization.

El objetivo de Bundling es “ Mejorar la respuesta de rendimiento y solicitar el tiempo de carga de las páginas web”.

El paquete no es más que encapsular los archivos en una unidad. Supongamos que nuestra aplicación contiene varios archivos CSS como bootstrap y otros, por lo que podemos vincular todos esos archivos en una sola unidad.

Veamos el final del código. En una aplicación web ASP.NET MVC, al crear un proyecto si selecciona la plantilla MVC, se genera automáticamente la configuración de los archivos del paquete.

Después de crear el proyecto, puede verificar debajo,

• Carpeta App_start: encontrará el archivo BundleConfig en el que se definen todos los paquetes de secuencias de comandos y estilos.
• Archivo web.config: Verá que el modo de depuración está establecido en verdadero.

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

Tenga en cuenta que el modo de depuración de compilación está establecido en verdadero en este momento. Esto significa que, cuando se ejecuta esta aplicación, el compilador agrupará o minimizará nuestros archivos JavaScript y CSS. Si no se establece en verdadero, no empaquetará los archivos. o

Puede anular esta configuración de Web.config con la propiedad EnableOptimizations en la clase BundleTable en el archivo Global.asax, como

public static void RegisterBundles(BundleCollection bundles) {
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));
  
    // This line of code enable bundling
    BundleTable.EnableOptimizations = true;
}

• En referencia, encontrará el paquete NuGet de optimización
  Assembly System.Web.Optimization
• Global.asax: encontrará el registro de paquetes
  BundleConfig.RegisterBundles(BundleTable.Bundles);

Crear paquete:

using System.Web.Optimization;
  
namespace Bundle_MVC {
public class BundleConfig {
     
    public static void
    RegisterBundles(BundleCollection bundles)
    {
        //Script bundles
        bundles.Add(
            new ScriptBundle("~/bundles/jquery")
                .Include("~/Scripts/jquery-{version}.js"));
  
        bundles.Add(
            new ScriptBundle("~/bundles/jqueryval")
                .Include("~/Scripts/jquery.validate*"));
  
        
        bundles.Add(new ScriptBundle("~/bundles/modernizr")
                        .Include("~/Scripts/modernizr-*"));
  
        bundles.Add(new ScriptBundle("~/bundles/bootstrap")
                        .Include("~/Scripts/bootstrap.js"));
        
         
        //Style Bundles
        bundles.Add(new StyleBundle("~/Content/css")
                        .Include("~/Content/bootstrap.css",
                                 "~/Content/site.css"));
    }
}
}

Como puedes ver,

• Este archivo contiene solo un método, es decir, RegisterBundles(). En este método, tenemos que registrar todos los archivos que deben cargarse con una solicitud. Aquí examine el método RegisterBundles que se utiliza para crear, registrar y configurar paquetes. Puede ver los objetos ScriptBundle y StyleBundle que estamos usando para agrupar los tipos de archivos js y CSS.
  • ScriptBundle: es responsable de los archivos Script, es decir, javascript (JS).
  • StyleBundle: es responsable de los archivos de hojas de estilo, es decir, CSS.
• El código en el método RegisterBundles crea nuevos paquetes de JavaScript y CSS llamados como ~/bundles/jquery,~/bundles/modernizr,~/Content/css así en esos incluye todos los archivos apropiados (es decir, depuración o minificación) en los scripts y la carpeta Estilo.

Veamos un poco más a fondo el primer Scriptbundle, es decir

bundles.Add(
      new ScriptBundle("~/bundles/jquery")
    .Include("~/Scripts/jquery-{version}.js")
);

En este paquete,

• Que coincidan con la string comodín {versión} «~/Scripts/jquery-{versión}.js». Esto significa que, para la configuración de depuración, se agregará el archivo jquery-1.7.1.js al paquete y, en una configuración de lanzamiento, se agregará jquery-1.7.1.min.js.

Nota: este patrón comodín { versión } se usa para crear automáticamente ese tipo particular de paquete de secuencias de comandos con la versión adecuada en la carpeta Scripts. Selecciona automáticamente la versión completa para las configuraciones de depuración y la versión «.min» para las compilaciones de lanzamiento.

Además, se puede ver en el código

• Método .Include(): el método include toma una array de strings, donde cada string es una ruta virtual al recurso.
• En lugar de este método, podemos usar IncluirDirectorio para incluir todos los archivos de la carpeta al paquete (según un patrón de búsqueda). También podemos incluir una subcarpeta en este método.

Veamos cómo definir IncluirDirectorio:

Bundle.Add(new ScriptBundle("~/bundle/js")
         .IncludeDirectory("~/Content/JS","*.js"));
         // .IncludeDirectory("~/Content/JS","*.js",true));
  
bundles.Add(new StyleBundle("~/bundle/css")
         .IncludeDirectory("~/Content/themes", "*.css"));
        // .IncludeDirectory("~/Content/themes", "*.css",true));

Aquí,

• ~/bundle/js y ~/bundle/css: nombre del paquete
• ~/Content/JS y ~/Content/themes: ruta de la carpeta
• *.js y *.css: patrón de búsqueda

Hay un tercer parámetro, que representa el valor booleano para buscar en subcarpetas o no. Si lo desea, establezca en verdadero.

Registrar paquete: después de agrupar, debemos registrar el archivo global.asax del paquete. Entonces llamamos a este método en el método Application_start y registramos el paquete para agrupar Config.

using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
  
namespace Bundle_MVC {
public class MvcApplication : System.Web.HttpApplication {
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        FilterConfig.RegisterGlobalFilters(
            GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }
}
}

Paquete de renderizado: después de registrarse, renderice los paquetes a la vista, puede ver los paquetes de secuencias de comandos y estilos en el archivo de diseño de la carpeta de visualización.

• JS: @Scripts.Render(“Specify_scriptname”): se usa para renderizar paquetes de tipo javascript
• CSS: @Styles.Render(“Specify_styletname”) :Utilizado para renderizar paquetes de tipo CSS

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    
    <!--Hidden code inside layout view-->
    
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
</head>
<body></body>
</html>

Salida: como hemos incluido el sitio y los archivos CSS de arranque en el nombre del paquete de estilo CSS. Puede ver, en la pestaña en la red para CSS, solo hay una solicitud presente y, si ve debajo de la pestaña fuente, hay una carpeta de contenido en la que verá solo un archivo que se muestra en lugar de separado para el sitio y el arranque y lo mismo para los archivos js, puede verlos en la carpeta de paquetes.

Y si abre cualquier archivo de paquete, mostrará un tipo de datos ilegibles como se ve en la imagen a continuación. Son datos minimizados, por lo que no es un formato legible por humanos. Puede reformatearlo para que sea legible haciendo clic en el símbolo { } en la pestaña Fuente.

Nota: De esta manera, puede comprobar el rendimiento de estos archivos. Con o sin agrupación, verá una gran diferencia en el rendimiento en términos de tamaño o tiempo.

ventajas:

• La agrupación ayuda a descargar el mismo tipo de archivos mediante una sola solicitud en lugar de múltiples requests.
• En lugar de obtener todos los archivos de recursos (CSS y js) uno por uno, podemos crear un grupo de recursos y obtener ese paquete en una sola solicitud.
• La minificación ayuda a reducir el tamaño de los archivos y mejora la capacidad de respuesta de las requests.
• Resuelve el problema de que el archivo de cambio del servidor no se refleje en el navegador, la agrupación se ocupa de este problema automáticamente agregando un código hash a cada paquete como un parámetro de consulta en la URL cada vez que cambia el contenido de los archivos JS y CSS, un nuevo código hash se generará y representará automáticamente en la página.