Good Coding: modularized js files or one big js file?

Question

Just want to ask the gurus out there about this. I know that CSS files are better merged instead of separated into a zillion files. Does js work the same way? Here's a few points I currently know(or believe...so you can point something out if my belief/understanding is wrong):

• i know that js is better modularized for easier maintenance
• it's "risky" to merge all files into one since there are functionalities that you just want to be on a certain page.
• i know concurrent downloads slow down a page so it's better to just do 1 big file.
• merging into 1 file might cause problems with variable scoping?
• i know there are javascript compilers ala bundle-fu or YUI, but is that the answer to all? different files for dev then just 1 file for js?

Answer 1

You don't need to use the same files for development and production, so you can have the best of both worlds: modularisation for development, and concatenation for deployment. Here's a list of tools for concatenation and minification.

Answer 2

We always modularize our JavaScript into separate files but then use server side includes to ensure the browser only has to make a single call for JS.

Answer 3

I take a pragmatic approach for deployment merge+minimise core application scripts (aka the global components), and then merge+minimise the per-section or per-page scripts (the local components). This leaves you with typically two or three scripts to download not including your JS library (read: jquery).

You rarely want to dump everything on one big file of death because it's generally unlikely that your visitor is going to visit every page and need every bit of code in their, so it's false economy to think that giving them everything in one hit is faster than giving them what they need in a few distributed hits, especially when you consider the downloading executing profile of scripts (i.e. blocking).

And I hope it goes without saying that you do all of this for deployment only. Always, always do your dev with modular scripts, let the build process handle the merge.

Answer 4

It's a trade-off between the increased overhead of separate files and the chance you're having users download code they'll never use. You should look at how users use your app.

Consider using a build script to concatenate your files.