Async loading of javascript files using MVC4 Bundling and HTML5 async attribute

Question

HTML5 has an async attribute for script files, to enable async loading.

<script type="text/javascript" src="myScript.js" async></script>

I can take advantage of this with my MVC4 bundling by referencing the bundle like so.

<script type="text/javascript" src='@Scripts.Url("~/bundles/jquery")' async></script>

But what this does mean is my scripts are bundled even when in debug mode.

So how can I take advantage of bundling and the async attribute without loosing non-minification when in debug.

Neeraj Gulia · Accepted Answer · 2017-02-14 10:45:26Z

69

If you upgrade to the 1.1-alpha1 release, you can just add the async attribute to the tag format either via:

Scripts.DefaultTagFormat = @"<script src=""{0}"" async></script>"

or passing it where you want the async tag

Use following instead of Scripts.Render("~/bundles/jquery")

Scripts.RenderFormat(@"<script src=""{0}"" async></script>", "~/bundles/jquery")

edited Feb 14, 2017 at 10:45

Neeraj Gulia

7208 silver badges25 bronze badges

answered Dec 6, 2012 at 19:51

Hao Kung

28.2k6 gold badges86 silver badges93 bronze badges

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

5 Comments

Enull Over a year ago

System.Web.Optimization 4.0 seems to have removed both DefaultTagFormat and RenderFormat, disallowing custom script tag output (using AssetManager.RenderScriptTag directly).

Giles Roberts Over a year ago

@E-Null The current release now supports both the above methods if you just do PM> Install-Package Microsoft.AspNet.Web.Optimization

Ron Over a year ago

Where do I need to write those lines ?( one of them..) And what need upgrade to 1.1 -alpha? the MVC version or the Web Optimization ? Thanks...

Rudey Over a year ago

This breaks CDN fallbacks using CdnFallbackExpression. The fallback check will be executed before the deferred script is loading causing the fallback to always kick in.

BermudaLamb Over a year ago

I don't see an answer for the question "Where do I need to write those lines?" Specifically, where do we need to place the Scripts.DefaultTagFormat = line?

Collectives™ on Stack Overflow

Async loading of javascript files using MVC4 Bundling and HTML5 async attribute

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related