How to combine MVC bundling and asynchronous loading of JS files

Question

I have an MVC page that has a number of JavaScript dependencies, let's call them depend-A and depend-B where depend-B depends on depend-A. These are both included in different bundles in MVC that is being included on the page. After running this through Google's pagespeed tool it suggested that we should be including the JS asynchronously to prevent render blocking.

Because of the dependencies, they need to load in particular order so I have looked into utilising LABJS to load them asynchronously in the correct order to prevent the render blocking.

This works by including the bundle's URL, but I lose the ability to be able to have the debug versions of the JS files locally while developing.

Can anyone suggest a way around this, so that we can load the JS files asynchronously but in order and maintain the debug versions locally?

Here is what I am currently using.

<script src="~/Scripts/LAB.min.js"></script>
<script>
    $LAB
    .script("@Scripts.Url("~/bundles/jquery")").wait()
    .script("/scripts/fileone.js").wait()
    .script("/scripts/filetwo.js").wait(function() {
        FunctionInFileTwo();
    });
</script>

The page source with the above code is as follows.

<script src="/Scripts/LAB.min.js"></script>
<script>
    $LAB
    .script("/bundles/jquery?v=GnU3whLS74nHNYUsUJjcWJKdXvKBNbFqBrkQVKSNlKc1").wait()
    .script("/scripts/scripts/fileone.js").wait()
    .script("/scripts/scripts/filetwo.js").wait(function() {
        FunctionInFileTwo();
    });
</script>

Answer 1

It doesn't look like there's any clean API available for this.

Scripts.Render("~/bundles/yourbundle") returns an IHtmlString of the necessary script tags - you could make a method that scavenges the script srcs from that string and generates the correct $LAB invocations.

Scripts.Manager.RenderExplicit(tagFormat, paths) comes close, where you'd just pass a better format string as the first argument, but reading the code it looks like it could start including differently formatted script tags verbatim in the middle of the list.