多个 JavaScript 文件，合并为一个答案

【问题标题】：Multiple JavaScript files, combine into one多个 JavaScript 文件，合并为一个
【发布时间】：2011-02-02 16:55:59
【问题描述】：

我正在使用 ASP.NET MVC 开发并使用多个 JavaScript 文件。例如。 jQuery、jQuery UI、谷歌地图、我自己的 JavaScript 文件等

为了性能，我应该将它们合二为一吗？如果有，怎么做？

【问题讨论】：

Put javascript in one .js file or break it out into multiple .js files?的可能重复

【解决方案1】：

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

外部库文件（jquery、flot、插件）
内部 lib 文件（由多个页面共享）
页面特定文件（仅由该页面使用，可能由两个页面使用）

这样，我两全其美：启动时不会出现过多的 http 请求，而且不是单个文件无法从并行下载中受益

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

用什么？ Martijn 的建议是关于金钱的。根据我的经验，YUI 是使用最广泛的，这是我们在以前和现在的工作中使用的。

【讨论】：

【解决方案2】：

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

关于如何做的问题：

Google’s Closure Compiler
雅虎的YUI Compressor

【讨论】：

【解决方案3】：

如果它们都将包含在您的所有页面中，那么这并没有什么不同。但是，如果有些仅与某些页面相关，那么从技术上讲，最好将它们分开并仅将相关页面包含在相关页面上。

【讨论】：

【解决方案4】：

据我所知，您确实应该：更少的文件意味着更少的 http 获取，因此在用户首次加载页面时性能更好。因此，他们会节省一秒钟的时间，他们会在第一页出现在您的页面上。但是之后，这些文件都被套现了，那就没什么区别了……

我没有深入研究 javascript 引擎本身，但是一个文件中的函数无论是在大文件还是小文件中都会以相同的方式处理。所以在执行上没有区别。

所以，节省你的时间，不要改变任何东西，因为这会花费你太多时间而回报太少，尤其是当你发现你想要最新版本的 jquery（顺便说一句，今天发布了一个新版本），并且您必须重新连接所有内容...

【讨论】：

将js文件合并为一个时，如果两个在不同的文件中同名，可能会出现变量的问题。不同文件或同一个文件中变量的作用域不一样。
没有文件范围变量，它们要么是全局的，要么是函数的局部变量。所以Cedric提到的问题就不存在了。