如何将多个 javascript 文件的请求合并到一个 http 请求中？

Question

这个概念对我来说是一个新概念——我第一次遇到它是在 YUI 依赖配置器. 。基本上，文件不是对多个文件进行多个请求，而是链接到一个 http 请求中，以减少页面加载时间。

有人知道如何在 LAMP 堆栈上实现这个吗？（我看到已经有人问过类似的问题，但它 似乎是 ASP 特定的.

谢谢！

更新：这两个答案都有帮助......（我的代表还不够高，无法发表评论，所以我在这里添加一些临别想法）。我也来了 在另一篇博文中 包含可能有用的特定于 PHP 的示例。不过，大卫的构建答案让我考虑采用不同的方法。谢谢，大卫！

Answer 1

有多种方法，最明显的两种是：

1. 构建一个像 YUI 这样的工具，它会根据您根据需要勾选的组件构建一个定制的、独特的版本，以便您仍然可以将文件作为静态文件提供。当您下载它们的包时，MooTools 和 jQuery UI 都提供了这样的包构建器，以便为您提供最精简、最高效的库。我确信那里存在通用的通用工具。
2. 创建一个简单的 Perl/PHP/Python/Ruby 脚本，根据请求提供一堆 JavaScript 文件。因此，“onerequest.js?load=ui&load=effects”将转到 PHP 脚本，该脚本加载文件并为它们提供正确的内容类型。这样的例子有很多，但我个人并不喜欢。

我不喜欢通过任何类型的脚本提供静态文件，但我也喜欢使用 10 个左右的独立小类文件来开发我的代码，而无需花费 10 个 HTTP 请求。因此，我想出了一个自定义构建过程，它将所有最常见的类和函数组合在一起，然后将它们缩小到像project.min.js这样的单个文件中，并在我的所有视图/模板中都有一个在生产中包含此文件的条件。

编辑 - “自定义构建过程”实际上是一个非常简单的 perl 脚本。它读取我作为参数传递的每个文件并将它们写入一个新文件，可以选择传递整个文件 JSMIN （以您最喜欢的所有语言提供）自动。

在命令中看起来像这样：

perl build-project-master.pl core.js class1.js etc.js /path/to/live/js/file.js

Answer 2

关于这个@有一篇很好的博客文章 http://www.hunlock.com/blogs/Supercharged_Javascript.

Answer 3

你想要的是 缩小. 。我刚刚写了一个 演练 用于设置它。

Answer 4

Capistrano 是一个相当流行的基于 Ruby 的 Web 部署工具。如果您正在考虑或已经在使用它，那么有一个很棒的 gem 可以找出 CSS 和 Javascript 依赖项、合并和缩小文件。

gem install juicer

来自 榨汁机 GitHub 页面, ，它可以找出哪些文件相互依赖并将它们合并在一起，减少每个页面视图的http请求数，从而提高性能。