PDA

View Full Version : Remove white space from JavaScript source code



VortexCortex
Oct 9th, 2006, 10:01 PM
I wrote a JavaScript that removes the white space from javascript source code in order to speed up download times.
For instance:


var i =
3
//notice the odd line breaks.
i += 4;
if (i < 8) alert( "smaller" )
else
alert( "bigger" );

Condenses to:


var i=3;i+=4;if(i<8)alert("smaller");else alert("bigger");


I hope you find it useful.


<html>
<head>
<title>Code Condenser</title>
<style type="text/css">
#source{font-size:10pt;width:90%;height:300px;}
body{text-align:center;}
</style>
<script type="text/javascript">
function vc_js_condenser(){var a=/[a-zA-Z0-9._'"]/;var b=/[a-zA-Z0-9._]/;var c=/[a-zA-Z0-9._\]\)"']/;
function d(e,f){e=e.replace(/[\n\r]+/g,"\n");var g=(typeof(f)=="boolean")?f:false;var h=["var","else",
"new","do","case","with","typeof","delete","try","finally","throw","in","instanceof"];var i=0;var j=
new Array();var k=e.split('');l=k.length;var m=new Array();var G=null;var o=false;var p=[["'","'","\\"]
,['"','"','\\'],["//","\n",null],["/*","*/",null]];var q="[](){},;/\n";var r;function s(){if(m.length<1)
return;var u=m.join('');if((!g)||((u.match(/^\/\//)==null)&&(u.match(/^\/\*/)==null))){if(!((u=="\n")&&
((G==';')||(G=="\n")))){if((G!=null)&&(G.match(a)!=null)&&(u.match(a)!=null))j[j.length]=' ';j[j.length]
=u;G=u;}}m.length=0;v=false;}var v=false;var w=false;while(i<l){if(!o){if((k[i]==" ")||(k[i]=="\t")){s();
}else{var x=false;if(q.indexOf(k[i])>-1){if(k[i]!='/'){x=true;s();}else if((m.length>0)&&(m[0]!='/')){
s();}}for(var y=0;y<p.length;y++){var z='';if((m.length>0)&&(m[m.length-1]==p[y][0].charAt(0)))z=m[
m.length-1];var A=z+k[i];if(A==p[y][0]){o=true;r=y;if(z!='')m.length--;if(m.length>0)s();if(z!='')m
[m.length]=z;break;}}if((k[i]=="/")&&(!o)&&(m.length==0)&&(G!=null)&&(G.match(c)==null)&&(i+1<k.length)
&&(k[i+1]!='/')){o=true;r=null;}var B=k[i].match(b)!=null;if(m.length<1)v=B;if(v!=B){s();v=B;}m[m.length]
=k[i];if(x)s();}}else{m[m.length]=k[i];var C=m.join('');if(r!=null){var D=C.lastIndexOf(p[r][1]);if((D!=-1)
&&(D>0)){if(m[D-1]==p[r][2]){if((D>2)&&(m[D-2]==p[r][2])){s();o=false;}}else{s();o=false;}}}else{if((w==false)
&&(k[i]=="/")){i++;while((i<k.length)&&(k[i].match(b)!=null)){m[m.length]=k[i];i++;}s();o=false;i--;}else{if
(!w&&(k[i]=="\\"))w=true;else w=false;}}}i++;}s();var E=-1;for(var i=0;i<j.length;i++){var u=j[i];var
F=(i>0)?j[i-1]:null;var n=(i<(j.length-1))?j[i+1]:null;if(u=="\n"){if((F!=null)&&(n!=null)){if((F.match(c)
!=null)&&(n.match(a)!=null)){u=';';for(var H=h.length-1;H>-1;H--){if(F==h[H])u=' ';}j[i]=u;E++;if((E<j.length)
&&(E>-1)&&(i!=E))j[E]=j[i];}}}else{E++;if((E<j.length)&&(E>-1)&&(i!=E))j[E]=j[i];}}j.length=E+1;return j;}var
I=document.getElementById('source');var J=I.value.length;I.value=d(I.value,document.getElementById('uncomment').checked
==true).join('');var K=I.value.length;var F=document.getElementById("saved");F.removeChild(F.firstChild);var
L=document.createElement("span");F.appendChild(L);L.appendChild(document.createTextNode("Original Size: "+
J+" characters"));L.appendChild(document.createElement("br"));L.appendChild(document.createTextNode(
"Condensed Size: "+K+" characters"));L.appendChild(document.createElement("br"));L.appendChild(
document.createTextNode("Size Difference: "+(J-K)+" characters"));if(J!=0){L.appendChild(document.createElement
("br"));L.appendChild(document.createTextNode("Condensed Code is "+(Math.floor(K/J*10000)/100)+
"% of original size."));}}
</script>
</head>
<body>
<h1>JavaScript Source Code Condenser</h1>
<p>Paste only valid Javascript (no HTML tags) in the box below.</p>
<button onclick="vc_js_condenser();">Condense Code</button>&nbsp;<input type="checkbox" checked="checked" id="uncomment" />Remove Comments&nbsp;<button onclick="document.getElementById('source').select();">Select All</button><br />
<textarea id="source"></textarea><br />
<p id="saved"><span></span></p>
</body>
</html>


This is a Javascript version of part of a PERL script I wrote to compress javascript.
I used the PERL "compressor" script on the above javascript and saved 2.2kb characters.
Let me know what you think.:thumbsup:

ealbrecht
Oct 10th, 2006, 07:09 PM
Uhhh, yeah but why not just include the script externally, have the client download it once and then it's cached for all pages to use.

Consider your target audience; I mean, most people are going to be broadband anyway.

Also, since this is all server-side there's going to be overhead on your server. This is fine for a small target audience, but if you have thousands of visitors during peak hours then your script is going to create unnecessary overhead on your server.

VortexCortex
Oct 10th, 2006, 10:12 PM
You must not have used the html / javascript...

--------------

You paste in some pure javascript, no html tags.

condense it

copy and paste the output into your favorite text editor

and save it as a .JS file

refrence the .js file you created from your html documents...

You only use the condenser ONE TIME per script.

The benefit is that your page loads faster, you save on bandwidth costs, and the file takes up less space on your server.
(The target audience has nothing to do with how much bandwith and hosting storage costs)

The down side is that your source code is harder to read (or is that a feature)

Make a copy of the uncondensed original source code incase you need to make changes to it.

-------

My PERL compressor is a different story.
It compresses the javascript even more. But I use it the same way as the above script. COMPRESS ONCE, and save as .JS file. I do not dynamicly compress my code and deliver it, that would bog down the server with redundant compression requests.

VortexCortex
Nov 8th, 2006, 05:33 AM
I have posted a working example of the above script at:

www.vortexcortex.com/tools/jscondense/ (http://www.vortexcortex.com/tools/jscondense/)