jQuery/JavaScript - performance-issue when having a lot of small .js-Files?

Question

Hi all,

i've got a site with a lot of referenced .js-Files; those are rather small files, but I want to keep my methods separated by topic/functionality.

Is it better to keep all the methods in one .js-File or is it no problem to have many (~ 20 - 30) small files all including only some lines?

Answer 1

By all means keep them separate for development, but you should consider bundling them together into one file for production.

There is a nice discussion at sitepoint.com

For each of these files, an HTTP request is sent to the server, and then the browser awaits a response before requesting the next file. Limits (or limitations) of the browser generally prevent parallel downloads. This means that for each file, you wait for the request to reach the server, the server to process the request, and the reply (including the file content itself) to reach you. Put end to end, a few of these can make a big difference to page load times.

Answer 2

Actually it's a bad idea to have so many referenced files. The basic idea for performance issues is to try to minimize HTTP Requests as much as possible (at least on your production server). Take a look at this http://developer.yahoo.com/performance/rules.html#num_http

Answer 3

Does anyone have a clever nant script which can do this for you? I've written a custom nant task which uses the YUI compressor to minify my css and js, but it would be useful to add combining to it. How do you guys handle this?

Answer 4

I don't know what framework (if any) you use on serverside, but Ruby on Rails have a script include function that depending on the settings (e.g. test or production) it can either create lots of script tags (typically test mode) or create one tag with all scripts concatenated into one (optionally compressed with some plugins) file. I'm sure many other frameworks support something like this too.

UPDATE: I just remembered: You can allso manually compress (by stripping whitespace and comments, shortening variable names etc.) and combine javascript files and CSS files with the Yahoo! UI Library: YUI Compressor. Just be sure your JavaScript is correct before you compress it, try JSLint.