在企业应用程序框架中包含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-ajax的MVC3 ajax. min.js

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

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

谢谢你的帮助 - 维诺德

Answer 1

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

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

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

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

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

也不要把你的JS在viewbag.这是服务器上不必要的开销和负载.只需在页面中添加引用即可!

我刚刚遇到过这个问题,如果你想注入js和css但是保留缓存功能,这可能大致与你的事情有关:

http://yepnopejs.com/

MVC4现在支持捆绑