在企业应用程序框架中包含 js/css 文件的最佳实践是什么？答案

【问题标题】：What is the best practice to include js/css files in an enterprise application framework?在企业应用程序框架中包含 js/css 文件的最佳实践是什么？
【发布时间】：2012-08-22 16:49:49
【问题描述】：

我正在使用 ASP.NET MVC3 进行企业应用程序开发。当然，我有不同的主布局和多个视图。

我的担忧

在主布局中包含所有 js/css 文件可能会影响页面的性能
在视图中包含文件（在需要的地方）会创建重复引用（启动 jquery/其他库）
引用越多，客户端和服务器之间的来回请求就越多 - 这反过来会影响输出页面的性能

我的想法

创建所需资源的自定义列表并将其存储在 ViewBag 中。让主布局引用此对象以包含 js/css 文件
或者添加链接，该链接使用某个键（用于标识正在呈现的页面的唯一值）引用操作，并动态生成包含所有必需资源的输出作为单个响应。并使用唯一键缓存输出（inmem/staticfile）以用于后续请求。一种自定义资源捆绑。

请分享您的想法，欢迎任何想法和建议！

编辑：2012 年 9 月 17 日

以下答案更多地讨论了 Web 应用程序开发领域中的优化技术 - 欣赏这些答案。

我想从架构的角度来讨论，重点是创建正在呈现的页面所需的动态资源集合。

例如，在特定视图中我想使用需要 jquery-ui-1.8.11.min.js 的 jQuery UI，在某些视图中我想使用需要 MicrosoftMvcAjax.js 和 jquery.unobtrusive 的 MVC3 ajax -ajax.min.js

我不想在主布局中包含永久引用，这将导致为所有视图加载这些 js。相反，我想在运行时包含动态的 js 文件。

希望这可能会增加清晰度！

感谢您的帮助 - 维诺德

【问题讨论】：

在主布局页面中包含库。这样您就不必担心只在需要的地方添加它，并且可以使用该框架将任何功能添加到站点内的任何页面。
缓存...你想过它是怎么做的吗？良好的缓存可能会解决您的顾虑。
凯尔，谢谢你的回复。但这是我最关心的问题。我不想在主布局中添加所有库 - 一种性能问题。
您打算添加多少个库？根据 Sampo 的建议，您需要查看库的缓存。仅将其包含在某些页面上并不是明智的选择。
在主布局中添加了公共库。仍然某些页面需要专有库。例如，如果一个页面需要 cookie 处理或拖放功能，我希望包含那些 js 文件。

标签： javascript html css asp.net-mvc razor

【解决方案1】：

您需要首先考虑减小下载大小：

将所有 js 和 css 放入尽可能少的文件中。这是因为客户端在任何时候只能打开 ~~2 个 HTTP 通道~~（大多数浏览器现在支持更多，信息 here），在此之后的所有文件下载都会排队等待之前的文件下载完成。
minify 你的 js 和 css。

一旦你把它缩小到一个合理的大小，你就可以考虑上面的问题了。你要下载，前期内容量最少，所以在主。这将提高性能，因为客户端可以缓存它。缓存是一件好事，这样可以避免客户端每次访问您网站上的页面时都需要请求 js 和 css。

您可能还想考虑应用 HTTP 到期标头。

雅虎在很多这些想法上做了一个很好的网站：http://developer.yahoo.com/performance/rules.html

另外不要把你的js放在viewbag里。这是服务器上不必要的开销和负载。只需在您的页面中添加参考！

MVC4 现在支持bundling

【讨论】：

+½ 用于WTFPL 答案中包含的工作（还有另一个 ½ 用于不忘记 yepnope 的缓存能力）;)
+1 好答案。附带说明一下，如果这是您不想处理的事情，请考虑使用 CloudFlare 等 3rd 方解决方案。
ASP.NET MVC4支持资源捆绑，决定将项目升级到MVC4。