skaterdav85 Posted March 25, 2011 Share Posted March 25, 2011 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 More sharing options...
Fmdpa Posted March 25, 2011 Share Posted March 25, 2011 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 More sharing options...
skaterdav85 Posted March 26, 2011 Author Share Posted March 26, 2011 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 More sharing options...
thescientist Posted March 26, 2011 Share Posted March 26, 2011 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/ Link to comment Share on other sites More sharing options...
Spunky Posted March 26, 2011 Share Posted March 26, 2011 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 More sharing options...
justsomeguy Posted March 28, 2011 Share Posted March 28, 2011 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 More sharing options...
jeffman Posted March 28, 2011 Share Posted March 28, 2011 Gotta be careful with some of those minifiers. Crockford points out a few gotchas lurking in his version. JSG's link has a link there also. Link to comment Share on other sites More sharing options...
skaterdav85 Posted March 28, 2011 Author Share Posted March 28, 2011 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 More sharing options...
thescientist Posted March 28, 2011 Share Posted March 28, 2011 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 More sharing options...
justsomeguy Posted March 28, 2011 Share Posted March 28, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.