Why does dumping all JavaScript files into one giant file change their behavior?

Question

I took a snapshot of the jquery.js file and jquery-ui files that I use and dumped them into a giant .js file with all of the other .js files that I use for my site.

When I do just this with no minfication/packing, the files stop working and I get "recursion too deep" errors on the file when I try to load it on my site instead of the usual .js files. All of the errors came from jquery and jquery-ui. Using a simple numbering scheme I made sure that the jquery.js/jquery-ui files were the first listed in the file and in the correct order (the same as includes as individual files.)

Two questions: 1) Doesn't the include tags for JavaScript have the same effect as dumping all of the files into one giant file? Is there extra isolation/insulation that JavaScript files get from being in their own script tags or in different files?

2) My goal is to make my site faster by having one huge .js file with all JavaScript I ever use in my site (which is heavy in JQuery) and minify that file. Why is this misguided? What is a better way to do it?

NOTE: Google's CDN version of the JQuery files don't work for me, all of the JQuery plugins/themes I use don't work with Google's versions (anyway who says that they can successfully use Google's CDN is lying.)

UPDATE: Thanks for the good advice in the answers, all of it helped me learn more about deploying JavaScript files on a production server. I am actually always using the latest SVN branch of the JQuery UI plugins and there were errors in the UI plugins that prevented them from being merged together with my files. I got the latest Theme Rolled plugins that are already minified in one file and that worked around the problem.

Answer 1

I'd recommend using a script manager such as this one to only register the files and plugins you need, and load them on the fly.

This keeps your requests to a minimum, and you don't have to load some huge 300k JS file one very page.

Answer 2

Probably your JavaScript files have some syntax errors. Browser can correct them when loading files one by one, but fail when "bad" files combined. You can try to compile your file using Rhino compiler (http://www.mozilla.org/rhino/)

java -cp build/js.jar org.mozilla.javascript.tools.jsc.Main giant.js

Also you can use JSLint validator (http://www.jslint.com/), thought likelly it will not be able to handle jQuery. But you still can combine all your files and validate them.

Answer 3

Another problem could be the load order changed. Most JavaScript files should be load order independent, but if you load jquery at the end after you have your:

$(document).ready(function() {});

you'll run into problems.