Javascript一次请求多个JS文件答案

【问题标题】：Javascript one request for multiple JS filesJavascript一次请求多个JS文件
【发布时间】：2012-04-19 12:23:54
【问题描述】：

我正在考虑创建执行以下操作的脚本：

从服务器上使用的 JS 目录中获取所有 javascripts
将所有脚本合二为一 - 这将只发出一个请求而不是多个请求
缩小组合脚本
缓存文件

假设需要加载文件的顺序写在某个配置文件中。

现在，当我加载 myexamplepage.com 时，我实际上使用了 jQuery、backbone、mootools、prototype 和其他一些库，但我没有向服务器询问这些多个文件，而是调用 myexamplepage.com/js/getjs 并将我得到的内容组合在一起和缩小的JS文件。这样我就消除了对服务器的那些额外请求。当我在网上阅读有关加快您网站速度的信息时，我发现您向服务器发出的请求越多，您的网络就会变得越慢。

由于我对编程世界很陌生，我知道我想到的很多东西已经存在，我认为这也不是例外。

因此，请列出您所知道的与我所描述的完全或相似的内容。（请注意，每次您希望更改脚本时，您都不需要使用任何类型的缩小器或第三方软件，您保持原始文件结构，你只使用类助手）

附：我认为同样的方法也可以用于 CSS 文件。

我正在使用 PHP 和 Apache。

【问题讨论】：

您的网站使用什么服务器端技术？
What do you use to minimize and compress JavaScript libraries? 的可能重复项
@Richard Ev - 当时是 PHP，但我正在考虑它自己的概念，我想了解任何平台的任何解决方案，他们的方法是什么。
@epascarello 你可能没有阅读整篇文章，因为我告诉过它不是那个。
你不明白Make、Ant、Maven背后的想法吗？他们控制构建文件以推出的过程。如果您更改一个文件，make 脚本会处理它并仅更改受影响的文件。在运行时执行此操作会导致性能下降和未准备好的缓存。

标签： javascript performance httprequest minify

【解决方案1】：

我建议不要让服务器即时执行此操作：只需连接脚本并通过非破坏性压缩器运行它们，例如“simple”中的jsmin 或Google Closure Compiler "模式。

这也使您有机会在该文件上放置版本号，并使其具有较长的缓存寿命，这样用户就不必在每次访问该页面时都重新下载它。例如：假设您的页面内容更改得足够频繁，以至于您将页面上的缓存标头设置为每天都过期。自然，您的 JavaScript 不会每天都在变化。所以你的page.html 可以包含一个名为all-my-js-v4.js 的文件，它的缓存寿命很长（比如一年）。如果您更新 JavaScript，请创建一个名为 all-my-js-v5.js 的新一体化文件并更新 page.html 以包含该文件。下次用户看到page.html 时，他们会请求更新的文件；但在那之前，他们可以使用他们的缓存副本。

如果您真的想即时执行此操作，如果您使用的是 apache，则可以使用 mod_pagespeed。

【讨论】：

我明白你在说什么，我知道第 3 方 minfiers 和组合器，但如果我决定在 JS 文件中添加另一行，我需要对所有文件执行相同的操作 - 这需要一些时间，不是吗？编辑：我读了一点关于 mod_pagespeed 的内容，看起来很有趣，我稍后会谈到。但这不会是真正相同的方法，因为这需要在服务器上安装这个模块，我想如果你坐在共享服务器后面，你就无法做到这一点。
@VytautasButkus：“这需要一些时间，不是吗？” 没有任何实际意义。作为一个实验，我刚刚通过jsmin 运行了 8M 的（基本上不相关的）JavaScript 文件。花了四分之一秒。 Closure Compiler 较慢，为 34 秒，但那是因为它做了更多的工作（并获得了更好的结果）。而且我猜你的 JavaScript 少于 8M。（它在 6.5 秒内完成 jQuery 1.7.2 文件。）这是在我的双核 2.4GHz 机器上，所以根本不是一个超级充电的怪物。
我不是在谈论软件压缩文件所需的时间，我是在谈论您需要将所有 5 个或更多文件放入软件然后上传这些文件的时间。假设您每天都进行更新，那么您每天都需要这样做。那你每周在这上面浪费多少时间？假设你可以完全跳过这个过程。
@VytautasButkus：如果您有一个脚本可以触发流程并增加内部版本号，那么所花费的时间几乎为零。但是不，我不知道有任何解决方案可以完全自动执行，包括（比如说）更新page.html 以引用最新版本。（如果您的页面是通过 PHP 创建的，那么您当然可以使用 PHP 通过从脚本使用的任何文件中读取版本号来自动完成该部分。）

【解决方案2】：

如果您使用.NET，我可以推荐Combres。它对 JavaScript 和 CSS 文件进行组合和缩小。

【讨论】：

【解决方案3】：

我知道这是一个老问题，但您可能对这个项目感兴趣：https://github.com/OpenNTF/JavascriptAggregator

假设您在 javascript 中使用 AMD 模块，该项目将根据需要创建高度可缓存的层。它还具有您可能感兴趣的其他功能。

【讨论】：