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?

Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
Tom Squires
  • 8,848
  • 12
  • 46
  • 72
  • How do I add type=“text/css” - http://stackoverflow.com/questions/15662096/how-do-i-add-type-text-css-to-a-script-tag-when-using-system-web-optimization – LCJ Nov 08 '13 at 17:40

2 Answers2

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.

yan.kun
  • 6,820
  • 2
  • 29
  • 38
  • 9
    Just wondering: is there a file stored somewhere for that bundle or does it just exist in memory? – Elliot Feb 04 '13 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. – Dan Esparza May 21 '13 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 '13 at 18:22
  • 9
    In the "basic" template of MVC4 (Visual Studio), bundles are prepared in "BundleConfig.cs" (App_Start folder). – Apolo Apr 15 '14 at 11:11
  • 2
    As per comment in other answer: Consider the async javascript attribute: `Scripts.RenderFormat(@"", "~/bundles/jquery"` – OzBob Nov 11 '14 at 05:21
  • This is great because it lets you put all of the bundling for all of the pages for the entire project in one file! (dripping sarcasm) – QueueHammer Dec 17 '14 at 16:50
  • For me another important benefit is the cache busting you get for free. If any file changes in your bundle, the view will change the src of the bundle to a new bundle so the client picks up the modified scripts on the next page load – seebiscuit May 03 '18 at 21:14
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.

Termato
  • 1,556
  • 1
  • 16
  • 33