JavaScript stops working when I compress my script

Question

I want to compress my 2000+ lines of javascript and I have tested both http://dean.edwards.name/packer/ and http://closure-compiler.appspot.com/home .

But in both cases, the compressed script gives me errors. An example of an error is jQuery(document).Da is not a function .

Why isn't my script working after optimization? And what can I do to optimize / compress my script?

Answer 1

Make sure you have a semicolon at the beginning of every JavaScript file. Bizarre, I know, but here's why:

You might have something like this in one file:

function someFunc() {
   ...
}

followed by something like this in the next file (this is how many jQuery plugins look):

(function($) {
   ...
})(jQuery);

That gets compressed into this:

function someFunc(){ }( function($){...} )(jQuery);

Which essentially calls someFunc with function($){...} as it's argument. Then, it will take whatever is returned, and assume it is a function and call it with jQuery as the argument.

This is why most jQuery plugins start with ;(function($){ .

Putting a semicolon at the beginning of every file (or the end, but make it consistent) will make your scripts look like:

;function someFunc(){ }; (function($){...})(jQuery);

That way, your scripts will be interpreted as intended.

Answer 2

You could try an online YUI Compressor. This is the first result on google: http://www.refresh-sf.com/yui/

Answer 3

i had the same problems. everytime i wanted to minify my javascript-files inclusive a few jquery-plugins i got an error. first i tried to solve the problems with the addional semicolons as nicholaides explained in his last post. even with his advice i couldn't manage to minify my js-file without errors. after that i changed the following line in every jquery-plugin and in worked for me; for instance:

(function($) {
$.fn.defaultInputs = function(settings) { ...

i have simplified to

jQuery.fn.defaultInputs = function(settings) { ...