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

Question

This concept is a new one for me -- I first came across it at the YUI dependency configurator . Basically, instead of having multiple requests for many files, the files are chained into one http request to cut down on page load time.

Anyone know how to implement this on a LAMP stack? (I saw a similar question was asked already, but it seems to be ASP specific .

Thanks!

Update: Both answers are helpful...(my rep isn't high enough to comment yet so I'm adding some parting thoughts here). I also came across another blog post with PHP-specific examples that might be useful. David's build answer, though, is making me consider a different approach. Thanks, David!

Answer 1

There are various ways, the two most obvious would be:

1. Build a tool like YUI which builds a bespoke, unique version based on the components you ticked as required so that you can still serve the file as static. MooTools and jQuery UI all provide package-builders like this when you download their package to give you the most streamlined and effecient library possible. I'm sure a generic all purpose tool exists out there.
2. Create a simple Perl/PHP/Python/Ruby script that serves a bunch of JavaScript files based on the request. So "onerequest.js?load=ui&load=effects" would go to a PHP script that loads in the files and serves them with the correct content-type. There are many examples of this but personally I'm not a fan.

I prefer not to serve static files through any sort of script, but I also like to develop my code with 10 or so seperate small class files without the cost of 10 HTTP requests. So I came up with a custom build process that combines all the most common classes and functions and then minifies them into a single file like project.min.js and have a condition in all my views/templates that includes this file on production.

Edit - The "custom build process" is actually an extremely simple perl script. It reads in each of the files that I've passed as arguments and writes them to a new file, optionally passing the entire thing through JSMIN (available in all your favourite languages) automatically.

At the command like it looks like:

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

What you want is Minify . I just wrote a walkthrough for setting it up.

Answer 4

Capistrano is a fairly popular Ruby-based web deployment tool. If you're considering it or already using it, there's a great gem that will figure out CSS and Javascript dependencies, merge, and minify the files.

gem install juicer

From the Juicer GitHub page , it can figure out which files depend on each other and merge them together, reducing the number of http requests per page view, thus improving performance.