Automatic minimization of Javascripts and stylesheets
2012-01-14 18:47:00 CET - kafoso
Minimizing Javascripts and cascading style sheets (CSS) on your website will not only make your website load faster; it might also grant you higher page rank in Google. But what does minimization of a script or stylesheet actually mean? Learn more in this article and try out the automatic script and css minimizors.
Table of contents
Minimizing code means:
"Removing any and all irrelevant whitespace, linebreaks, and tabulations; irrelevant in the sense that the client computer does not need these entities to be present in the script in order for it to function and execute correctly."
Many programmers use whitespace, linebreaks, and perhaps most importantly tabulations in order to get a better overview of the code they are producing. Most of the time the structure of linebreaks and tabulations reflect the desired outcome of the code, which, in a sense, makes the code itself a low-level program flow diagram.
With compiled applications this is not a problem, as the compiler removes any irrelevant enetities and converts the code to its binary form. However, Javascripts must first be downloaded from the server to the client computer and then compiled at the moment it is needed, which is actually called interpreted. This is why minimizing the size of the Javascript file that must be downloaded will improve website load times; transferring less data directly results in faster load times.
Automatic minimizor
Copy the desired Javascript code or CSS markup to your clipboard and paste it in the respective textarea below. Upon clicking "Minimize" the contents of the textarea will be converted and you may then copy the minimized code and use it freely on your website.
Do not replace your existing Javascript or stylesheet
Please do not replace the contents of your existing Javascript and/or stylesheet with the minimized code. Instead, create a new filed named the same as your current file, but with ".min" ("period min") before the file extention. E.g. "style.css" becomes "style.min.css".
Minimizor script
The scripts require jQuery
The scripts below require the jQuery library to funciton. Read more about it and download it here: http://jquery.com/
For Javascripts
$content = $('#minimize-code-original textarea').val();
$content = $content.replace(/\s*(\(|\)|{|}|;|\*\/)\s*/g, function(all, before, gone, after) {
return all+'\n';
}); // Break blocks in to separate lines in order to safely remove comments
$content = $content.replace(/\/\/.*/g, ''); // Remove single line comments
$content = $content.replace(/(\r|\n|\r\n|\t)*/g,''); // Remove linebreaks and tabs
$content = $content.replace(/\/\*(.+?)\*\//g, ''); // Remove multiline comments
$content = $content.replace(/\s*(=|!=|\+=|-=|\*=|\:=|>|>=|<|<=|\+\+|--|\+|-|\*|\/|&|\|)\s*/g, function(all, before, gone, after) {
return all.replace(/\s*/g,'');
}); // Remove irrelevant whitespace
$content = $content.replace(/\s*(\(|\)|{|}|,|\.|;|:|#|\?|'|")\s*/g, function(all, before, gone, after) {
return all.replace(/\s*/g,'');
}); // Remove irrelevant whitespace
$('#minimize-code-minimized textarea').val($content);
$('#minimize-tab-minimized').parent().selectTab();
$('#minimize-code-minimized textarea').focus();
$('#minimize-code-minimized textarea').select();
return false;
});
For Cascading Style Sheets (CSS)
$content = $('#minimize-code-original textarea').val();
$content = $content.replace(/\n/g,''); // Remove linebreaks
$content = $content.replace(/(\/\*).*?(\*\/)/g,''); // Remove comments
$content = $content.replace(/\s*({|}|,|;|:)\s*/g, function(all, before, gone, after) {
return all.replace(/\s*/g,'');
}); // Remove irrelevant whitespace
$('#minimize-code-minimized textarea').val($content);
$('#minimize-tab-minimized').parent().selectTab();
$('#minimize-code-minimized textarea').focus();
$('#minimize-code-minimized textarea').select();
$('#minimize-tab-minimized').parent().selectTab();
return false;
});
Using regular expressions to minimize code
A great tool for minimizing code is regular expressions, often referred to as "Regex". Even though the syntax may be different from programming language to programming language the concept is still the same: search for one or several occurances of a sub-string within a string, without neccessarily searching for specific characters, but instead searching for patterns which match the sub-strings.
The purple text in the code above are the regular expressions used to minimize the code. These expressions search for matches such as linebreaks, whitespaces around characters, logical operators, etc. If you are interested in learning more about regular expressions, which is a very powerful and fast tool (execution-wise), I suggest visiting https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions. Here you will find a list of the various different expression types and several usage examples.