¿Por qué usar @ Scripts.Render ("~ / bundles / jquery")

Respuestas:

288

La agrupación consiste en comprimir varios archivos JavaScript u hojas de estilo sin ningún formato (también denominado minificado) en un solo archivo para guardar el ancho de banda y la cantidad de solicitudes para cargar una página.

Como ejemplo, podría crear su propio paquete:

bundles.Add(New ScriptBundle("~/bundles/mybundle").Include(
            "~/Resources/Core/Javascripts/jquery-1.7.1.min.js",
            "~/Resources/Core/Javascripts/jquery-ui-1.8.16.min.js",
            "~/Resources/Core/Javascripts/jquery.validate.min.js",
            "~/Resources/Core/Javascripts/jquery.validate.unobtrusive.min.js",
            "~/Resources/Core/Javascripts/jquery.unobtrusive-ajax.min.js",
            "~/Resources/Core/Javascripts/jquery-ui-timepicker-addon.js"))

Y hazlo así:

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

Una ventaja más de @Scripts.Render("~/bundles/mybundle")sobre el nativo <script src="~/bundles/mybundle" />es que @Scripts.Render()respetará la web.configconfiguración de depuración:

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

Si debug="true"es así, en su lugar, representará etiquetas de script individuales para cada script de origen, sin ninguna minificación.

Para las hojas de estilo, deberá usar un StyleBundle y @ Styles.Render ().

En lugar de cargar cada script o estilo con una sola solicitud (con script o etiquetas de enlace), todos los archivos se comprimen en un solo archivo JavaScript u hoja de estilo y se cargan juntos.

yan.kun
fuente
99
Solo me pregunto: ¿hay un archivo almacenado en algún lugar para ese paquete o simplemente existe en la memoria?
Elliot
15
Se almacena en el caché.
NicoJuicy
44
También se puede configurar para usar automáticamente un CDN y recurrir a scripts locales si el CDN no está disponible. Es muy hábil.
Dan Esparza
39
Hay un beneficio adicional al hacer esto. Al depurar, Scripts.Render generará cada archivo desagregado, lo que hace que el desarrollo local sea mucho menos doloroso, pero en un entorno en vivo, esto generará el resultado agrupado / minimizado, que puede conducir a las ganancias de rendimiento como se describió anteriormente, pero sin cambiando cualquier código
Sethcran
99
En la plantilla "básica" de MVC4 (Visual Studio), los paquetes se preparan en "BundleConfig.cs" (carpeta App_Start).
Apolo
51

También puedes usar:

@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\"></script>", "~/bundles/mybundle")

Para especificar el formato de su salida en un escenario donde necesita usar Charset, Type, etc.

Termato
fuente
3
También es muy útil para cargar módulos requirejs
Phil
13
... o para agregar el asyncatributo.
Christoph Fink
77
@Scripts.RenderFormat("<script type=\"text/javascript\" async src=\"{0}\"></script>", "~/bundles/mybundle")
Robert McKee
1
... o para agregar el atributo crossorigin = "anónimo"
Alexandre Swioklo