Using CDN in MVC script bundle. What am I missing?

Question

I am trying to use a CDN for loading jquery. I have read this article and this seems like it should be very straightforward.

My script bundle is defined as follows.

bundles.UseCdn = true; bundles.Add(new ScriptBundle("~/bundles/jquery", "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js").Include( "~/Scripts/jquery-{version}.js"));

I am including it on the page as follows:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body> </html>

But when I look at firebug it seems that jquery is being loaded from localhost. firebug inspection

I have tried with both realease and debug builds. What am I missing? I think this should be quite straightforward. Thanks.

Check out this related and very interesting post asp.net/mvc/tutorials/mvc-4/bundling-and-minification — Jaider
– Jaider, Commented Jan 19, 2014 at 17:35

imran_ku07 · Accepted Answer · 2013-03-14 05:45:02Z

46

Run your application in debug="false" mode or use BundleTable.EnableOptimizations = true;

answered Mar 14, 2013 at 5:45

imran_ku07

1,40412 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dave Jellison Over a year ago

FWIW: I'm not sure how many people are aware of this property... I use if (Debugger.IsAttached) in this scenario to load by "debug" scripts and in the "else" I trigger the BundleTable.EnableOptimizations = true manually instead of relying on the web.config. If you're working in an environment using IIS vs. the Asp.net Development Host, this means if you need to debug your scripts, worst case you have to go back and remember to run the IDE and then just refresh your page to get back the plain-text verbose scripts. Hope this helps someone.

Dave Jellison Over a year ago

Sorry, forgot to mention. This also ensures I never forget to turn on optimizations or compile the right way when deploying, etc. This isn't typically an issue with production but it can be an issue with QA sites, etc. where you want to ensure your test team is working with the minified versions to ensure stability.

Liam Over a year ago

BundleTable.EnableOptimizations = true; will turn it minification on all the time

user3285954 Over a year ago

@DaveJellison My guess is that most developers don't have direct access to servers in stage and production environments especially when load balancing is used so attaching a debugger isn't really an option.

Dave Jellison Over a year ago

Right, my comment only applies to your local environment, naturally. It doesn't help the OP's point, just a trick you can use in local development to test both minified and 'standard' CSS/JS before you go running off publishing something that doesn't work and wasting time...especially if you want to test your CDN, which is usually possible right from your localhost...

juFo · Accepted Answer · 2017-10-15 08:50:01Z

Actually you can write @RaviGadag his method shorter when using a recent version of ASP.NET MVC. This way you don't have to write the fallback yourself in the Layout:

public static void RegisterBundles(BundleCollection bundles) { bundles.UseCdn = true; var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"; var jqueryBundle = new ScriptBundle("~/bundles/jquery", jqueryCdnPath).Include("~/Scripts/jquery-{version}.min.js"); jqueryBundle.CdnFallbackExpression = "window.jQuery"; bundles.Add(jqueryBundle); // ... BundleTable.EnableOptimizations = true; }

available jquery versions in the Content Delivery Network (CDN): http://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_0

It should be "window.jQuery", not "window.jquery". JavaScript is case-sensitive.

Ravi Gadag · Accepted Answer · 2013-03-14 11:11:18Z

make sure you are not in debug mode.

 bundles.Add(new ScriptBundle("~/bundles/jquery", "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js")

set BundleTable.EnableOptimizations = true; // if you want to use debug mode

jQuery will be requested from the CDN while in release mode and the debug version of jQuery will be fetched locally in debug mode. When using a CDN, you should have a fallback mechanism in case the CDN request fails.

if CDN Request fail then you can provide a callback

<script type="text/javascript"> if (typeof jQuery == 'undefined') { var e = document.createElement('script'); e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")'; e.type = 'text/javascript'; document.getElementsByTagName("head")[0].appendChild(e); } </script>

They may have downvoted because your CDN fallback places the script reference in the head, which is generally ill-advised.
Instead of writing JS code, you can specify a CDN fallback expression in BundleConfig class like this: jquery.CdnFallbackExpression = "window.jQuery";
Shouldn't that be BundleTable.EnableOptimizations = false to use debug mode?
@MichaelTranchida I think Ravi Gadag meant EnableOptimizations = true allows you to "debug" the bundling & minification as if it were in release mode

Collectives™ on Stack Overflow

Using CDN in MVC script bundle. What am I missing?

3 Answers 3

5 Comments

1 Comment

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

4 Comments

Linked

Related