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

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 interfaz de usuario jQuery.

¿Cuánto de esto vale la pena mantener y cuánto es tirar? Me he dado cuenta cuando se crea un controlador de la vista create.cshtml inflexible 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, es 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 se puede ver arriba ~/bundles/jqueryval es la ruta de acceso virtual del paquete que combina los archivos especificados en el mismo. Luego, cuando vea esto:

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

Lo anterior incluirá los scripts incluidos bajo esa referencia.

¿Debo conservarlo? ¿Debo hacer referencia a todos estos archivos JS que fueron definidos inicialmente en BundleConfig.cs?

En el caso del paquete jqueryval, puede encontrar que los scripts no intrusivos y de validación incluidos son muy útiles.

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

Puede quitar el paquete del curso si no necesita o quiere usar una validación discreta. Si lo hace entonces yo creo que también tendrá que actualizar su web.config, el establecimiento de los campos necesarios para false para asegurar que su proyecto no será buscar los archivos, similar a este:

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

el beneficio y la diferencia exacta entre el uso de la validación intrusiva y discreta se explica muy bien en este artículo: Brad Wilson: Unobtrusive Client Validation in 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 trabaja 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 sólo es 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 tiene, por ejemplo, 5 referencias de archivos en su vista, el navegador del cliente descargará los 5 por separado y hay un límite en cada navegador 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 solo paquete, el navegador solo descarga 1 archivo, el incluido.

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

Cuando pruebe esto, tenga en cuenta que en modo 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 es necesario que utilice 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 empaquetado y minificación que reducen el número de solicitudes al servidor y el tamaño de la biblioteca CSS y JavaScript solicitada, lo que mejora el tiempo de carga de la página. .

La clase System.Web.Optimization ofrece las técnicas de empaquetamiento 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 el estilo de paquete

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

Creación de secuencias de comandos paquete

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