Pourquoi utiliser @ Scripts.Render («~ / bundles / jquery»)


Réponses:


288

Le regroupement consiste à compresser plusieurs fichiers JavaScript ou feuilles de style sans aucun formatage (également appelé minifié) en un seul fichier pour économiser la bande passante et le nombre de demandes de chargement d'une page.

Par exemple, vous pouvez créer votre propre bundle:

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

Et rendez-le comme ceci:

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

Un autre avantage par @Scripts.Render("~/bundles/mybundle")rapport au natif <script src="~/bundles/mybundle" />est qu'il @Scripts.Render()respectera le web.configparamètre de débogage:

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

Si debug="true"c'est le cas, il rendra des balises de script individuelles pour chaque script source, sans aucune minification.

Pour les feuilles de style, vous devrez utiliser un StyleBundle et @ Styles.Render ().

Au lieu de charger chaque script ou style avec une seule demande (avec des balises de script ou de lien), tous les fichiers sont compressés dans un seul fichier JavaScript ou feuille de style et chargés ensemble.


9
Je me demande simplement: y a-t-il un fichier stocké quelque part pour ce bundle ou existe-t-il simplement en mémoire?
Elliot

15
Il est stocké dans le cache.
NicoJuicy

4
Il peut également être configuré pour utiliser automatiquement un CDN et revenir aux scripts locaux si le CDN n'est pas disponible. C'est assez lisse.
Dan Esparza

39
Cela présente un avantage supplémentaire. Lors du débogage, Scripts.Render affichera chaque fichier dégroupé, ce qui rend le développement local beaucoup moins pénible, mais dans un environnement en direct, cela produira le résultat groupé / minifié, ce qui peut conduire aux gains de performances décrits ci-dessus, mais sans changer n'importe quel code.
Sethcran

9
Dans le modèle "de base" de MVC4 (Visual Studio), les bundles sont préparés dans "BundleConfig.cs" (dossier App_Start).
Apolo

51

Vous pouvez aussi utiliser:

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

Pour spécifier le format de votre sortie dans un scénario où vous devez utiliser Charset, Type, etc.


3
Également très utile pour charger les modules requirejs
Phil

13
... ou pour ajouter l' asyncattribut.
Christoph Fink

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

1
... ou pour ajouter l'attribut crossorigin = "anonyme"
Alexandre Swioklo
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.