227

How does

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

differ from just referencing the script from html like this

<script src="~/bundles/jquery.js" type="text/javascript"></script>

Are there any performance gains?

1

2 Answers 2

299

Bundling is all about compressing several JavaScript or stylesheets files without any formatting (also referred as minified) into a single file for saving bandwith and number of requests to load a page.

As example you could create your own 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"))

And render it like this:

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

One more advantage of @Scripts.Render("~/bundles/mybundle") over the native <script src="~/bundles/mybundle" /> is that @Scripts.Render() will respect the web.config debug setting:

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

If debug="true" then it will instead render individual script tags for each source script, without any minification.

For stylesheets you will have to use a StyleBundle and @Styles.Render().

Instead of loading each script or style with a single request (with script or link tags), all files are compressed into a single JavaScript or stylesheet file and loaded together.

7
  • 9
    Just wondering: is there a file stored somewhere for that bundle or does it just exist in memory?
    – Elliot
    Feb 4, 2013 at 13:23
  • 4
    It can also be set to automatically use a CDN and fallback to local scripts if the CDN is unavailable. It's pretty slick. May 21, 2013 at 13:44
  • 41
    There is an additional benefit to doing this. When debugging, Scripts.Render will output each file unbundled, which makes local development much less of a pain, but in a live environment, this will output the bundled/minified result, which can lead to the performance gains as described above, but without changing any code.
    – Sethcran
    Jul 25, 2013 at 18:22
  • 9
    In the "basic" template of MVC4 (Visual Studio), bundles are prepared in "BundleConfig.cs" (App_Start folder).
    – Apolo
    Apr 15, 2014 at 11:11
  • 2
    As per comment in other answer: Consider the async javascript attribute: Scripts.RenderFormat(@"<script src=""{0}"" async></script>", "~/bundles/jquery"
    – OzBob
    Nov 11, 2014 at 5:21
52

You can also use:

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

To specify the format of your output in a scenario where you need to use Charset, Type, etc.

4
  • 3
    Also very useful for loading requirejs modules
    – Phil
    Dec 2, 2013 at 14:00
  • 13
    ...or to add the async attribute. Oct 5, 2014 at 9:55
  • 7
    @Scripts.RenderFormat("<script type=\"text/javascript\" async src=\"{0}\"></script>", "~/bundles/mybundle") Oct 16, 2014 at 17:51
  • 1
    ... or to add the crossorigin="anonymous" attribute Jun 18, 2017 at 19:10

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.