Javascript one request for multiple JS files

Question

I was thinking about creating script that would do the following:

1. Get all javascripts from JS directory used on server
2. Combine all scripts to one - that would make only one request instead of multiple
3. Minify combined script
4. Cache the file

Let's say that the order in which the files need to be loaded is written in config file somewhere.

Now when I load myexamplepage.com I actually use jQuery, backbone, mootools, prototype and few other libraries, but instead of asking server for these multiple files, I call myexamplepage.com/js/getjs and what I get is combined and minified JS file. That way I eliminate those additional requests to server. And as I read on net about speeding up your website I found out that the more requests you make to server, the slower your web become.

Since I'm pretty new to programming world I know that many things that I think of already exists, I don't think that this is exception also.

So please list what you know that does exactly or similar to what I described.(please note that you don't need to use any kind of minifiers or third party software everytime you want your scripts to be changed, you keep original files structure, you only use class helper)

PS I think same method could be used for CSS files also.

I'm using PHP and Apache.

Answer 1

Rather than having the server do this on-the-fly, I'd recommend doing it in advance: Just concatenate the scripts and run them through a non-destructive minifier, like jsmin or Google Closure Compiler in "simple" mode.

This also gives you the opportunity to put a version number on that file, and to give it a long cache life, so that users don't have to re-download it each time they come to the page. For example: Suppose the content of your page changes frequently enough that you set the cache headers on the page to say it expires every day. Naturally, your JavaScript doesn't change every day. So your page.html can include a file called all-my-js-v4.js which has a long cache life (like, a year). If you update your JavaScript, create a new all-in-one file called all-my-js-v5.js and update page.html to include that instead. The next time the user sees page.html , they'll request the updated file; but until then, they can use their cached copy.

If you really want to do this on-the-fly, if you're using apache, you could use mod_pagespeed .

Answer 2

If you're using .NET, I can recommend Combres . It does combination and minification of JavaScript and CSS files.

Answer 3

I know this is an old question, but you may be interested in this project: https://github.com/OpenNTF/JavascriptAggregator

Assuming you use AMD modules for your javascript, this project will create highly cacheable layers on demand. It has other features you may be interested in as well.