DIY Minification

No minifier can compress bad code properly.

In this example, I just want to 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 Can I use; almost everything works in every browser (also Internet Explorer 10 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 100 KB jQuery script every time? How big is your uncompressed code? 5-6 KB...? 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 is 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 variables, ifs, loops, and definitions necessary?

Most of the time, NO!

1. Remove unnecessary if,loop,var
2. Keep a copy of your original code
3. Use the minifier

OPTIONAL (increases the performance & shorter code)

1. use shorthand operators
2. use bitwise operators (don't use Math)
3. use a,b,c... for your temp vars
4. use the old syntax (while,for... not forEach)
5. use the function arguments as placeholder (in some cases)
6. remove unneccessary "{}","()",";",spaces,newlines
7. 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 "No one 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');
}
// The 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');
}
// The same as
alert(condition?'yes':'no')
// If the condition is true alert yes else no

Convert a number to a string or vice versa:

var a=10;
var b=a.toString();
var c=parseFloat(b)
// The 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);
// The 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);
// The 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');
}

// The same as
var a=[1,2];
alert(a[n-1]||3);

// The 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 only 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: How do I check if an array includes a value in JavaScript?

Numbers

1000000000000
// The same as
1e12

var oneDayInMS=1000*60*60*24;
// The same as
var oneDayInMS=864e5;

var a=10;
a=1+a;
a=a*2;
// The 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 & bitwise if you search with your favorite search engine.

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 bad code.

You could use usemin from https://www.npmjs.com/package/grunt-usemin. Usemin, with other tasks as

• concat
• uglify
• cssmin
• filerev

is able to minify all js and css in one single file. You only need to add a build:js as you can see in snippet below:

<!-- build:js SCLogic.min.js -->
        <!-- Load app main script -->
        <script src="app/app.js"></script>
        <!-- Load services -->
        <script src="app/services/authInterceptorService.js"></script>
        <script src="app/services/authService.js"></script>
        <script src="app/services/blablaService.js"></script>
       

        <!-- Load controllers -->
        <script src="app/controllers/indexController.js"></script>
        <script src="app/controllers/homeController.js"></script>
        <script src="app/controllers/loginController.js"></script>
        <script src="app/controllers/blablaController.js"></script>
        
        <script src="app/directives/validNumber.js"></script>
       
        <script src="app/controllers/angular-locale_es-es.js"></script>
       
        <!-- endbuild -->