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

Question

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

我的疑虑

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

我的想法

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

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

  

编辑：2012年9月1日

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

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

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

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

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

感谢您的帮助 - Vinod

Answer 1

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

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

一旦你把它缩小到一个合理的大小，你就可以考虑上述情况。您想要预先下载最少量的内容，所以在主中。这将提高性能，因为客户端可以缓存它。缓存是一件好事，这会阻止客户每次访问您网站上的页面时都要求js和css。

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

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

也不要将你的js放在viewbag中。这是服务器上不必要的开销和负载。只需在页面中添加引用即可！

我刚刚遇到过这个问题，如果您想要注入js和css但保留缓存功能，那么这可能大致与您的事情有关：

http://yepnopejs.com/

MVC4现在支持bundling