We have an MVC 4 web application with a number of areas.
我们有一个MVC 4 Web应用程序，其中包含许多领域。
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.
有一个主要的布局视图，由网站上的所有页面使用，它包含所有CSS包含，渲染体标记，然后是所有JavaScript库。
<head>
<link rel="stylesheet" media="screen" href="~/Content/jquery-ui-1.10.3.custom.min.css" />
..
</head
<body>
<div id="main-content">@RenderBody()</div>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
..
</body>
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
JavaScript由常见的库组成，例如jquery，jqueryui和plug-ins。还有一个JavaScript文件，其中包含整个站点的自定义代码
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.
由于只有一个包含数千行的大型JavaScript文件，因此通过检查特定DOM元素是否存在来初始化代码例程以确定它是否继续。
runExample = function() {
if ($(".Example").length > 0){
// execute code
}
}
..
runExample();
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.
这当然是有问题的，因为所有文件都包含大量脚本，而有适用于所有页面的代码，大多数代码仅适用于某些区域或页面。
- Is there a better way to split the JavaScript up for the site? Keep in mind it is the custom code that is conditional, not necessarily the plug ins
- 有没有更好的方法来为网站分割JavaScript？请记住，自定义代码是有条件的，不一定是插件
- Even if there way a way to create a JavaScript file for each area, how would that be referenced within the main layout?
- 即使有办法为每个区域创建一个JavaScript文件，如何在主布局中引用它？
- Is it best to load the JavaScript include files at the end of the include file?
- 是否最好在包含文件的末尾加载JavaScript包含文件？
- What is the effect of minification on performance and would it benefit the custom code file?
- 缩小对性能的影响是什么？它会使自定义代码文件受益吗？
Any advice would be appreciated.
任何意见，将不胜感激。
1 个解决方案
#1
1
First, use bundling. Give BundleConfig.cs under the App_Start folder in your project a gander. By simply minifying and bundling all your JS together, it's sometimes inconsequential that certain code is not actually being used on the current page (the savings you gain from having one cached JS file that every page uses is sometimes better than loading a new different bit of JS on each page.)
首先，使用捆绑。在项目的App_Start文件夹下给BundleConfig.cs一个gander。通过简单地将所有JS缩小并捆绑在一起，有时无关紧要的是某些代码实际上并未在当前页面上使用（从每个页面使用一个缓存的JS文件获得的节省有时比加载新的不同位更好每页都有JS。）
If you need more fine grained control, you can use something like Require.js. You essentially write your JS in modules that depend on other modules to run (all of your plugins, jQuery, etc. become "modules" in this scenario). You'll need to manually minify and combine your JS as much as logically possible, but this will allow you to integrate various scripts together without having to worry about load order and missing dependencies.
如果您需要更精细的控制，可以使用Require.js之类的东西。您实际上是在依赖于其他模块运行的模块中编写JS（在这种情况下，所有插件，jQuery等都成为“模块”）。您需要在逻辑上尽可能地手动缩小和组合JS，但这将允许您将各种脚本集成在一起，而不必担心加载顺序和缺少依赖性。
As a side note, I would respectfully disagree with Kevin B. If maintainability dictates that your JS has to be in the head, I would say that's a symptom of a larger problem with your code design. The only good reason to add JS in the head is when it's essential that the JS be run before the page is rendered. A good example is Modernizr, which for one adds classes to the html element to allow you to specify different styles and such depending on whether certain features are available in the user's browser or in the case of IE, what version the user is running. Without loading in the head, your style would changed after page load leading to flashes of unstyled content and such. Other than situations like these, all JS should go before the closing body tag, as JS is blocking: the browser will completely stop what it's doing and all rendering of the page, and run the script completely before continuing. Too much of this in the head, and your users stare at a blank page for far too long.
作为旁注，我会恭敬地不同意Kevin B.如果可维护性决定你的JS必须处于领先地位，我会说这是你的代码设计中一个更大问题的症状。在头部添加JS的唯一好理由是在呈现页面之前运行JS是必要的。 Modernizr就是一个很好的例子，它可以为html元素添加类，以允许您指定不同的样式，具体取决于用户浏览器中是否有某些功能，或者在IE的情况下，用户运行的是什么版本。如果没有加载到头部，您的样式将在页面加载后更改，从而导致无格式内容的闪烁等。除了这些情况之外，所有JS都应该在关闭正文标记之前，因为JS阻塞：浏览器将完全停止正在执行的操作以及页面的所有呈现，并在继续之前完全运行脚本。头脑中有太多这样的东西，而且你的用户长时间盯着空白页面。
Also all script (and CSS for that matter) should be minified. There's no good reason not to, and the difference in bytes the user has to download is often quite dramatic. Especially in this day and age of mobile-everything and far-too-limited data plans, every byte truly does count.
此外，所有脚本（以及相关的CSS）都应该缩小。没有充分的理由不这样做，用户必须下载的字节差异通常非常大。特别是在这个时代的移动设备 - 一切和极其有限的数据计划中，每个字节确实都很重要。
#1
1
First, use bundling. Give BundleConfig.cs under the App_Start folder in your project a gander. By simply minifying and bundling all your JS together, it's sometimes inconsequential that certain code is not actually being used on the current page (the savings you gain from having one cached JS file that every page uses is sometimes better than loading a new different bit of JS on each page.)
首先，使用捆绑。在项目的App_Start文件夹下给BundleConfig.cs一个gander。通过简单地将所有JS缩小并捆绑在一起，有时无关紧要的是某些代码实际上并未在当前页面上使用（从每个页面使用一个缓存的JS文件获得的节省有时比加载新的不同位更好每页都有JS。）
If you need more fine grained control, you can use something like Require.js. You essentially write your JS in modules that depend on other modules to run (all of your plugins, jQuery, etc. become "modules" in this scenario). You'll need to manually minify and combine your JS as much as logically possible, but this will allow you to integrate various scripts together without having to worry about load order and missing dependencies.
如果您需要更精细的控制，可以使用Require.js之类的东西。您实际上是在依赖于其他模块运行的模块中编写JS（在这种情况下，所有插件，jQuery等都成为“模块”）。您需要在逻辑上尽可能地手动缩小和组合JS，但这将允许您将各种脚本集成在一起，而不必担心加载顺序和缺少依赖性。
As a side note, I would respectfully disagree with Kevin B. If maintainability dictates that your JS has to be in the head, I would say that's a symptom of a larger problem with your code design. The only good reason to add JS in the head is when it's essential that the JS be run before the page is rendered. A good example is Modernizr, which for one adds classes to the html element to allow you to specify different styles and such depending on whether certain features are available in the user's browser or in the case of IE, what version the user is running. Without loading in the head, your style would changed after page load leading to flashes of unstyled content and such. Other than situations like these, all JS should go before the closing body tag, as JS is blocking: the browser will completely stop what it's doing and all rendering of the page, and run the script completely before continuing. Too much of this in the head, and your users stare at a blank page for far too long.
作为旁注，我会恭敬地不同意Kevin B.如果可维护性决定你的JS必须处于领先地位，我会说这是你的代码设计中一个更大问题的症状。在头部添加JS的唯一好理由是在呈现页面之前运行JS是必要的。 Modernizr就是一个很好的例子，它可以为html元素添加类，以允许您指定不同的样式，具体取决于用户浏览器中是否有某些功能，或者在IE的情况下，用户运行的是什么版本。如果没有加载到头部，您的样式将在页面加载后更改，从而导致无格式内容的闪烁等。除了这些情况之外，所有JS都应该在关闭正文标记之前，因为JS阻塞：浏览器将完全停止正在执行的操作以及页面的所有呈现，并在继续之前完全运行脚本。头脑中有太多这样的东西，而且你的用户长时间盯着空白页面。
Also all script (and CSS for that matter) should be minified. There's no good reason not to, and the difference in bytes the user has to download is often quite dramatic. Especially in this day and age of mobile-everything and far-too-limited data plans, every byte truly does count.
此外，所有脚本（以及相关的CSS）都应该缩小。没有充分的理由不这样做，用户必须下载的字节差异通常非常大。特别是在这个时代的移动设备 - 一切和极其有限的数据计划中，每个字节确实都很重要。