多个JavaScript文件合并为一个

Question

我正在ASP.NET MVC中开发并使用多个JavaScript文件。 例如jQuery，jQuery UI，Google Maps，我自己的JavaScript文件等。

为了表现，我应该将它们合二为一吗？ 如果是这样，怎么样？

Answer 1

您希望将多个文件合并为一个的原因是为了最大限度地减少设置和删除http请求的延迟，您做得越多越好。 但是，许多较新的浏览器并行下载JavaScript文件（仍按顺序执行）。 结果是下载单个1Mb文件可能比三个350Kb文件慢。 我要做的是将我的文件分成三个包：

• 外部lib文件（jquery，flot，plugins）
• 内部lib文件（由多个页面共享）
• 页面特定文件（仅由该页面使用，可能由两页组成）

通过这种方式，我得到了两全其美：在启动时没有过多的http请求，而且，并不是单个文件无法从并行下载中受益

这同样适用于CSS，每个页面加载三个CSS包。 总的来说，我们的页面下载了六个捆绑文件和主html文件。 我发现这是一个很好的妥协。 您可能会发现不同的文件分组对您来说效果更好，但我的建议是不要创建单个捆绑包，除非它是一个单页应用程序。 如果您发现自己将相同的文件放入不同的捆绑包中，那么就应该重新考虑捆绑策略，因为您多次下载相同的内容。

用什么？ Martijn的建议是钱。 根据我的经验，YUI是最广泛使用的，这就是我在之前和当前工作中使用的。

Answer 2

关于您是否应该问的问题，请查看Shoban评论中的链接。

关于如何：

• 谷歌的Closure编译器
• 雅虎的YUI Compressor

Answer 3

如果它们都将被包含在您的所有页面中，那么它并没有真正有所作为。 但是，如果某些页面仅与某些页面相关，那么在技术上最好将它们分开并仅在相关页面上包含相关页面。

Answer 4

据我所知，你应该确实：更少的文件意味着更少的http get，因此当用户第一次加载页面时，性能会更好。 因此，他们将在第一页的页面上保存一瞬间。 但是之后，这些文件被兑现，然后它就没有任何区别......

我没有深入研究它自己的javascript引擎，但如果它在一个大文件或一个小文件中，一个文件中的函数将以相同的方式处理。 所以它在执行方面没有区别。

所以，节省你的时间， 不要改变任何东西，因为它会花费你太多的时间来获得太少的奖励，特别是当你发现你想要最新版本的jquery时（今天出现了新的版本），以及你必须重新连接一切......