如何将多个 javascript 文件的请求合并为一个 http 请求？答案

【问题标题】：How to combine requests for multiple javascript files into one http request?如何将多个 javascript 文件的请求合并为一个 http 请求？
【发布时间】：2010-09-11 05:47:42
【问题描述】：

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

有人知道如何在 LAMP 堆栈上实现这一点吗？（我看到有人问过类似的问题，但它seems to be ASP specific。

谢谢！

更新：两个答案都很有帮助......（我的代表还不够高，无法发表评论，所以我在这里添加一些分手想法）。我还来到across another blog post 提供了可能有用的特定于 PHP 的示例。不过，大卫的构建答案让我考虑采用不同的方法。谢谢，大卫！

【问题讨论】：

标签： php javascript apache http

【解决方案1】：

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

构建一个像 YUI 这样的工具，它可以根据您根据需要勾选的组件构建一个定制的、独特的版本，这样您仍然可以将文件作为静态文件提供。 MooTools 和 jQuery UI 在你下载他们的包时都提供了这样的包构建器，为你提供最精简和最有效的库。我确信那里存在通用的通用工具。
创建一个简单的 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

【讨论】：

【解决方案2】：

@http://www.hunlock.com/blogs/Supercharged_Javascript 上有一篇很好的博文。

【讨论】：

【解决方案3】：

你想要的是Minify。我刚刚写了一个walkthrough 来设置它。

【讨论】：

【解决方案4】：

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

gem install juicer

通过Juicer GitHub page，它可以找出哪些文件相互依赖并将它们合并在一起，减少每次页面浏览的http请求数，从而提高性能。

【讨论】：