title: javascript segregation/performance in an ASP.NET MVC Application
body: <p>We have an MVC 4 web application with a number of areas.</p>
  
  <p>There is a main layout view that is used by all the pages on the site and it contains all of the CSS includes, the render body tag, then all the JavaScript libraries.</p>
  
  <pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" media="screen" href="~/Content/jquery-ui-1.10.3.custom.min.css" /&gt;
  ..
  &lt;/head
  &lt;body&gt;
      &lt;div id="main-content"&gt;@RenderBody()&lt;/div&gt;
      &lt;script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      ..   
  &lt;/body&gt;
  </code></pre>
  
  <p>The JavaScript consists of common libraries such as jquery, jqueryui and plug-ins.
  There is also a single JavaScript file that contains the custom code for the whole site</p>
  
  <p>Since there is only 1 large JavaScript file with thousands of lines, code routines are initialized by checking for the existence of a particular DOM element to decide if it proceeds.</p>
  
  <pre><code>runExample = function() {
      if ($(".Example").length &gt; 0){
        // execute code
      }
  }
  ..
  runExample();
  </code></pre>
  
  <p>This is of course problematic since there is a great deal of script included for all files, while there is code that applies to all pages, most of the code only applies to certain areas or pages.</p>
  
  <ul>
  <li>Is there a better way to split the JavaScript up for the site?  <strong>Keep in mind it is the custom code that is conditional, not necessarily the plug ins</strong></li>
  <li>Even if  there way a way to create a JavaScript file for each area, how
  would that be referenced within the main layout? </li>
  <li>Is it best to load the JavaScript include files at the end of the include file? </li>
  <li>What is the effect of minification on performance and would it benefit the custom code file?</li>
  </ul>
  
  <p>Any advice would be appreciated.</p>