Put javascript in one .js file or break it out into multiple .js files?

Question

My web application uses jQuery and some jQuery plugins (e.g. validation, autocomplete). I was wondering if I should stick them into one .js file so that it could be cached more easily, or break them out into separate files and only include the ones I need for a given page.

I should also mention that my concern is not only the time it takes to download the .js files but also how much the page slows down based on the contents of the .js file loaded. For example, adding the autocomplete plugin tends to slow down the response time by 100ms or so from my basic testing even when cached. My guess is that it has to scan through the elements in the DOM which causes this delay.

Answer 1

I think it depends how often they change. Let's take this example:

• JQuery: change once a year
• 3rd party plugins: change every 6 months
• your custom code: change every week

If your custom code represents only 10% of the total code, you don't want the users to download the other 90% every week. You would split in at least 2 js: the JQuery + plugins, and your custom code. Now, if your custom code represents 90% of the full size, it makes more sense to put everything in one file.

When choosing how to combine JS files (and same for CSS), I balance:

• relative size of the file
• number of updates expected