Multiple Javascript files but only one HTTP request

Question

I want to separate my JS out nicely so each object is in its own file, I'll probably structure my directories and files like:

/js/modules/module1.js /js/pages/page1.js

Problem is I don't want to have like 50 HTTP requests for each file, is there a way to do this?

Answer 1

This technique is quite basic and logical. The situation is that we have several calls to external Javascript files within our HTML's header, which means several HTTP requests from the client's browser. How do we approach reducing all these HTTP requests?

Combine them so that there is at least only one call to an external Javascript file, Avoid breaking any Javascript-dependent functionality on the web page, Minify the Javascript to save on bandwidth

http://falcon1986.wordpress.com/2010/01/11/combine-and-minify-javascript-reduce-number-of-http-requests/

Answer 2

Two ways came to my mind:

1. Put only one js link in your site, like /scripts/all.js , and on the request for that js, compile and merge all files and serve them.
2. Use JavaScript dependency managers, to load scripts on-demand (rather than all of them, even if not used)

Answer 3

You can use a PHP file to serve all of them combined. This technique is used by many PHP softwares such as IP.board

In case of ASP.NET, this will help - http://abhijitjana.net/2011/10/06/bundling-and-minification-in-asp-net-4-5/