How to 'minify' Javascript code
Solution 1:
DIY Minification
No minifier can compress properly a bad code.
In this example i just wanna show how much a minifier does.
What you should do before you minify
And regarding jQuery... i don't use jQuery.jQuery is for old browsers,it was made for compatibility reasons .. check caniuse.com, almost everything works on every browser (also ie10 is standardized now) , i think now it's just here to slow down your web application...if you like the $() you should create your own simple function.And why bother to compress your code if your clients need to download the 100kb jquery script everythime?how big is your uncompressed code? 5-6kb..? Not to talk about the tons of plugins you add to to make it easier.
Original Code
When you write a function you have an idea, start to write stuff and sometimes you end up with something like the following code.The code works.Now most people stop thinking and add this to a minifier and publish it.
function myFunction(myNumber){
var myArray = new Array(myNumber);
var myObject = new Object();
var myArray2 = new Array();
for(var myCounter = 0 ; myCounter < myArray.length ; myCounter++){
myArray2.push(myCounter);
var myString = myCounter.toString()
myObject[ myString ] = ( myCounter + 1 ).toString();
}
var myContainer = new Array();
myContainer[0] = myArray2;
myContainer[1] = myObject;
return myContainer;
}
Here iss the minified code (i added the new lines)
Minified using (http://javascript-minifier.com/)
function myFunction(r){
for(var n=new Array(r),t=new Object,e=new Array,a=0;a<n.length;a++){
e.push(a);
var o=a.toString();
t[o]=(a+1).toString()
}
var i=new Array;
return i[0]=e,i[1]=t,i
}
But are all those vars , ifs, loops & definitions necessary?
Most of the time NO !
- Remove unnecessary if,loop,var
- Keep a copy of your original code
- Use the minifier
OPTIONAL (increases the performance & shorter code)
- use shorthand operators
- use bitwise operators (don't use
Math) - use a,b,c... for your temp vars
- use the old syntax (
while,for... notforEach) - use the function arguments as placeholder (in some cases)
- remove unneccessary
"{}","()",";",spaces,newlines - Use the minifier
Now if a minifier can compress the code your doing it wrong.
No minifier can compress properly a bad code.
DIY
function myFunction(a,b,c){
for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
return[b,c]
}
It does exactly the same thing as the codes above.
Performance
http://jsperf.com/diyminify
You always need to think what you need:
Before you say "Noone would write code like the one below" go and check the first 10 questions in here ...
Here are some common examples i see every ten minutes.
Want a reusable condition
if(condition=='true'){
var isTrue=true;
}else{
var isTrue=false;
}
//same as
var isTrue=!!condition
Alert yes only if it exists
if(condition==true){
var isTrue=true;
}else{
var isTrue=false;
}
if(isTrue){
alert('yes');
}
//same as
!condition||alert('yes')
//if the condition is not true alert yes
Alert yes or no
if(condition==true){
var isTrue=true;
}else{
var isTrue=false;
}
if(isTrue){
alert('yes');
}else{
alert('no');
}
//same as
alert(condition?'yes':'no')
//if the condition is true alert yes else no
Convert a number to a string or viceversa
var a=10;
var b=a.toString();
var c=parseFloat(b)
//same as
var a=10,b,c;
b=a+'';
c=b*1
//shorter
var a=10;
a+='';//String
a*=1;//Number
Round a number
var a=10.3899845
var b=Math.round(a);
//same as
var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)
Floor a number
var a=10.3899845
var b=Math.floor(a);
//same as
var b=a|0;//numbers up to 10 decimal digits (32bit)
switch case
switch(n)
{
case 1:
alert('1');
break;
case 2:
alert('2');
break;
default:
alert('3');
}
//same as
var a=[1,2];
alert(a[n-1]||3);
//same as
var a={'1':1,'2':2};
alert(a[n]||3);
//shorter
alert([1,2][n-1]||3);
//or
alert([1,2][--n]||3);
try catch
if(a&&a[b]&&a[b][c]&&a[b][c][d]&&a[b][c][d][e]){
console.log(a[b][c][d][e]);
}
//this is probably the onle time you should use try catch
var x;
try{x=a.b.c.d.e}catch(e){}
!x||conole.log(x);
more if
if(a==1||a==3||a==5||a==8||a==9){
console.log('yes')
}else{
console.log('no');
}
console.log([1,3,5,8,9].indexOf(a)!=-1?'yes':'no');
but indexOf is slow read this https://stackoverflow.com/a/30335438/2450730
numbers
1000000000000
//same as
1e12
var oneDayInMS=1000*60*60*24;
//same as
var oneDayInMS=864e5;
var a=10;
a=1+a;
a=a*2;
//same as
a=++a*2;
Some nice articles/sites i found about bitwise/shorthand:
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.140byt.es/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
There are also many jsperf sites showing the performance of shorthand & bitwsie if you search with your favorite searchengine.
I could go one for hours.. but i think it's enough for now.
if you have some questions just ask.
And remember
No minifier can compress properly a bad code.
Solution 2:
You could use one of the many available javascript minifiers.
- YUI Compressor
- Google closure compiler
- Dean Edwards packer
- JSMin
Solution 3:
Google just made available a javascript compiler that can minify your code, elimiated dead code branches and more optimizations.
google javascript compiler
Regards
K
Solution 4:
If you are using the VSCode editor, there are lots of plugins/extensions available.
The MinifyAll for instance is a very good one - compatible with many extension.
Install it and reload VSCode. Then click on your file, open command palette (Ctrl+Shift+p), ant type minify this document (Ctrl+alt+m) other available options there also like preserve original document and so on! Easy!
Solution 5:
I recently needed to perform the same task. While the compressors listed at The JavaScript CompressorRater do a great job and the tool is very useful, the compressors were not playing nice with some jQuery code I am using ($.getScript and jQuery.fn checks). Even the Google Closure Compressor choked on the same lines. While I could have eventually ironed out the kinks it was far to much squinting to do constantly.
The one that finally worked without issue was UglifyJS (thanks @Aries51), and the compression was only slightly less than all the others. And similar to Google it has a HTTP API. Packer is also nice and has language implementation in Perl, PHP, and .NET.