Jump to content

JS minification


skaterdav85
 Share

Recommended Posts

I just came across this site for JS minification, http://www.minifyjavascript.com/, and I was wondering what other people thought. Do you compress your JS? If so, what tool do you use?I put in some JS and and turned No Encoding to Off and it encrypted all my JS into something like this:

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('b o=6(7){8(3===p){9 r o(7)}8(k 7==="t"){3.4=g.s(7)}f 8(k 7==="u"){3.4=7}3.q=(6(){8(g.n){9 6(d,c){b 4=3.4;4.n(\'y\'+d,6(){c.A(4)});9 3}}f 8(g.h){9 6(d,c){(3.4).h(d,c,v);9 3}}}());3.B=6(5,j){b a;8(5.i(\'-\')!=-1){b e=5.i(\'-\'),l=5.z(e+1).w();a=5.m(0,e)+l+5.m(e+2,5.x)}f{a=5}3.4.C[a]=j;9 3}};',39,39,'|||this|el|CSSprop|function|obj|if|return|JSprop|var|cb|evt|hyphPos|else|document|addEventListener|indexOf|val|typeof|camelChar|substring|attachEvent|dQuery|window|bind|new|getElementById|string|object|false|toUpperCase|length|on|charAt|call|css|style'.split('|'),0,{}))

Link to comment
Share on other sites

That looks similar to the jQuery source code... Now it is making sense! They most use a tool similar to this to compress the jquery.js file. I was thinking it would be impossible to develop jquery using such meaningless variables and function names. I have never looked at the development code, but I imagine it makes much more sense.

Link to comment
Share on other sites

That looks similar to the jQuery source code... Now it is making sense! They most use a tool similar to this to compress the jquery.js file. I was thinking it would be impossible to develop jquery using such meaningless variables and function names. I have never looked at the development code, but I imagine it makes much more sense.
This is a library i started writing just for fun to understand JS better and to get an understanding of JS library development. I was using the same structure as jQuery (using a constructor function) but I called it dQuery lol. This is purely an educational exercise =)
Link to comment
Share on other sites

Typically each release of jquery comes in two "versions"1) dev- not minified, normally formated, etc. 2) prod - minified and compressed (gzipped)it's right there on the home pagehttp://jquery.com/

Edited by thescientist
Link to comment
Share on other sites

I've noticed that when I try to look at the jquery code on other pages that it is almost always encrypted to look something like that. Not only that but as thescientist just stated:

Typically each release of jquery comes in two "versions"1) dev- not minified, normally formated, etc. 2) prod - minified and compressed (gzipped)it's right there on the home pagehttp://jquery.com/
The main jquery library thingy is always released in a similar minified version, so Im expecting it's typically a good idea to do this to your jquery code, especially if you're making a library I suppose.
Link to comment
Share on other sites

It just decreases the size of the code. I have a 1.2MB Javascript file which gets minified down to around 600KB, and then the server compresses that which results in only 82KB going across the wire. So my 1.2MB of commented, indented code ends up using 82KB to transfer to the user. That's the major benefit of minifying the code. I don't use anything which refactors identifier names though, I just use one which strips whitespace and comments:http://fmarcia.info/jsmin/test.htmlThat takes 1308090 bytes of code and turns it into 670223 bytes, and then the server compresses that with gzip.

Link to comment
Share on other sites

It just decreases the size of the code. I have a 1.2MB Javascript file which gets minified down to around 600KB, and then the server compresses that which results in only 82KB going across the wire. So my 1.2MB of commented, indented code ends up using 82KB to transfer to the user. That's the major benefit of minifying the code. I don't use anything which refactors identifier names though, I just use one which strips whitespace and comments:http://fmarcia.info/jsmin/test.htmlThat takes 1308090 bytes of code and turns it into 670223 bytes, and then the server compresses that with gzip.
Does the server automatically compress files with gzip, or is this something you have to specify? How do you know the compressed size after the server has served you the file?
Link to comment
Share on other sites

simply put it's just server settings that can be configured depending on your server type. http://betterexplained.com/articles/how-to...ip-compression/Using a utility like Firebug or Chrome develop tools you can select a resource tab/view that will show you all assets (HTML/CSS/JS/images/etc) downloaded by the browser and their respective file sizes.

Link to comment
Share on other sites

I have my server set up to compress based on the mime type. I have it compressing these types:text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript application/javascriptIt's useless to compress things like images because they're already compressed. Either you're wasting time to do compression and decompression only to save a few bytes, or in certain cases the compressed version will actually be larger depending on the compression algorithm. Since Apache is handling the compression, it will also pay attention to the headers the browser sends and only use gzip or deflate if the browser supports it, otherwise it will send the uncompressed version.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...