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

Question

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

我的顾虑

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

我的想法

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

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

编辑：2012 年 9 月 17 日

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

我想从架构的角度来讨论，重点是创建一个被渲染的页面所需的动态资源集合。

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

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

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

感谢您的帮助 - Vinod

Answer 1

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

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

一旦你把它缩小到一个合理的大小，那么你就可以考虑上面的问题了。 您要下载最少数量的内容，因此在 master . 这将提高性能，因为客户端可以缓存它。 缓存是一件好事，这使客户端每次访问您网站上的页面时都不必请求 js 和 css。

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

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

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

MVC4 现在支持捆绑