Processing Javascript

Improve this page

All Javascript files in the local repo should be concatenated and uglified before pushing to production.

Concatenation is just appending all of the static files into one large file.

Minification refers to the removal of whitespace, line breaks, and other nonessential characters like comments so the code is still valid but as compact.

Uglification means converting the code in such a way that core logic can’t be easily understand. To do this it renames the variables and their references, etc.

Here is an example of minification vs uglification using FizzBuzz:

Original (note the comments):

// Setup for loop to run 100 times
for (var iteration = 1; iteration < 101; iteration++) {
  // If iteration is divisable by 3 & 5, print FizzBuzz
  if (iteration % 15 == 0) {
    console.log("FizzBuzz");
  // If iteration is divisable by 3 print Fizz
  } else if (iteration % 3 == 0) {
    console.log("Fizz");
  // If iteration is divisableby 5 print Buzz
  } else if (iteration % 5 == 0) {
    console.log("Buzz");
  // Print the iteration number
  } else {
    console.log(iteration);
  }
}

Minified (note the comments):

for(var iteration=1;iteration<101;iteration++){if(iteration%15==0){console.log("FizzBuzz")}else if(iteration%3==0){console.log("Fizz")}else if(iteration%5==0){console.log("Buzz")}else{console.log(iteration)}}

Uglified (note the variable names):

for(var e=1;e<101;e++){if(e%15==0){console.log("FizzBuzz")}else if(e%3==0){console.log("Fizz")}else if(e%5==0){console.log("Buzz")}else{console.log(e)}}