minification - Uso de los paquetes jquery/javascript ASP.NET MVC4

bundles asp net mvc 4

Question

cuando creé mi proyecto con la plantilla MVC4 estándar, había MUCHO javascript incluido, por ejemplo: jquery-molesto, jquery-validate, knockout, toda la jQuery UI.

¿Cuánto de esto vale la pena guardar y cuánto es tirar? Al crear un Controlador fuertemente tipado, me di cuenta de que la vista create.cshtml genera llamadas:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

¿Qué hace exactamente este archivo? ¿Debería mantenerlo? ¿Debo hacer referencia a todos estos archivos JS que se definieron inicialmente en BundleConfig.cs? ¿O no puedo molestarme?

Answer 1

¿Qué hace exactamente este archivo?

jqueryval no es un archivo sino una referencia a un paquete.

Un paquete en MVC4 es una colección de scripts, estilos u otros archivos agrupados en un único paquete.

Tendrá un archivo BundleConfig.cs en la carpeta App_Start , que contiene la configuración de qué archivo se agrega a qué paquete.

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive*",
            "~/Scripts/jquery.validate*"));

Como puede ver arriba ~/bundles/jqueryval es la ruta virtual del paquete que combina los archivos especificados en él. Entonces más tarde cuando ves esto:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Lo anterior incluirá los scripts incluidos bajo esa referencia.

¿Debería mantenerlo? ¿Debo hacer referencia a todos estos archivos JS que se definieron inicialmente en BundleConfig.cs?

En el caso del paquete de jqueryval es posible que los scripts no jqueryval y de validación incluidos sean muy útiles.

Son los scripts que se encargarán de administrar la validación discreta, manteniendo su DOM limpio y agradable.

Puede eliminar el paquete del curso si no necesita o quiere usar una validación discreta. Si haces eso, entonces creo que también necesitarás actualizar tu web.config , estableciendo los campos obligatorios en false para asegurarte de que tu proyecto no busque los archivos, similar a esto:

<add key="ClientValidationEnabled" value="false" />
<add key="UnobtrusiveJavaScriptEnabled" value="false" />

El beneficio y la diferencia exacta entre el uso de validación intrusiva y no intrusiva se explica muy bien en este artículo: Brad Wilson: Validación de cliente no intrusiva en ASP.NET MVC 3

En general, supongo que es bueno incluir solo lo que necesita. Si no necesita todos los archivos especificados en un paquete, elimine esos archivos, excluya todo el paquete o cree sus propios paquetes personalizados.

Prueba y error. Si los elimina y encuentra excepciones aleatorias en la consola del depurador de su navegador, intente agregar algunos de los archivos / paquetes nuevamente.

En general, la agrupación también funciona con hojas de estilo:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/jquery.ui.core.css",
            "~/Content/themes/base/jquery.ui.resizable.css",
            "~/Content/themes/base/jquery.ui.selectable.css",
            "~/Content/themes/base/jquery.ui.accordion.css",
            "~/Content/themes/base/jquery.ui.autocomplete.css",
            "~/Content/themes/base/jquery.ui.button.css",
            "~/Content/themes/base/jquery.ui.dialog.css",
            "~/Content/themes/base/jquery.ui.slider.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 beneficio para el desarrollador es solo tener que hacer referencia a un paquete individual en lugar de varios archivos.

El beneficio para el cliente es la cantidad de cargas individuales que el navegador tiene que hacer para obtener los scripts / archivos css.

Si, por ejemplo, tiene 5 referencias de archivos en su vista, el navegador del cliente descargará los 5 por separado y hay un límite en cada navegador para saber cuántos archivos se pueden descargar simultáneamente. Esto significa que si un cliente tiene una conexión más lenta, podría esperar unos segundos antes de que se carguen los archivos.

Sin embargo, si tiene los 5 archivos configurados para estar en un único paquete, el navegador solo descarga 1 archivo, el incluido.

Además, los paquetes se han minimizado (o los archivos en los paquetes) por lo que no solo está ahorrando el tiempo necesario para descargar los scripts sino que también ahorra en el tamaño de la descarga.

Cuando pruebe esto, tenga en cuenta que en el modo de depuración no hay diferencia, debe estar en modo de lanzamiento o habilitar la optimización de la tabla de paquete en el archivo BundleConfig.cs en la parte inferior del método RegisterBundles .

BundleTable.EnableOptimizations = true;

No tiene que usar los paquetes, aún puede hacer referencia libremente a scripts / archivos css individuales. Sin embargo, hace las cosas más fáciles cuando lo necesita.

Answer 2

MVC4 y .Net Framework 4.5 ofrecen técnicas de empaquetamiento y minificación que reducen el número de solicitudes al servidor y el tamaño de la biblioteca solicitada de CSS y JavaScript, lo que mejora el tiempo de carga de la página en el rendimiento de la página Simple Word aumenta y la página se carga más rápido.

La clase System.Web.Optimization ofrece las técnicas de agrupamiento y minificación que existen en el dll Microsoft.Web.Optimization.

Qué es el paquete Un paquete es un grupo lógico de archivos que se carga con una única solicitud HTTP. Puede crear un paquete de estilos y scripts para css y javascripts respectivamente llamando al método Add () de la clase BundleCollection en el archivo BundleConfig.cs.

Crear paquete de estilos

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

Crear paquete de scripts

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
 "~/Scripts/jquery-1.7.1.min.js",
 "~/Scripts/jquery.validate.min.js",
 "~/Scripts/jquery.validate.unobtrusive.min.js"));