title: How to combine MVC bundling and asynchronous loading of JS files
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>Here is what I am currently using.</p>
  
  <pre><code>&lt;script src="~/Scripts/LAB.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $LAB
      .script("@Scripts.Url("~/bundles/jquery")").wait()
      .script("/scripts/fileone.js").wait()
      .script("/scripts/filetwo.js").wait(function() {
          FunctionInFileTwo();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The page source with the above code is as follows.</p>
  
  <pre><code>&lt;script src="/Scripts/LAB.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $LAB
      .script("/bundles/jquery?v=GnU3whLS74nHNYUsUJjcWJKdXvKBNbFqBrkQVKSNlKc1").wait()
      .script("/scripts/scripts/fileone.js").wait()
      .script("/scripts/scripts/filetwo.js").wait(function() {
          FunctionInFileTwo();
      });
  &lt;/script&gt;
  </code></pre>