Minify Code Automatically

Requirements

• Visual Code Studio

Why Minify?

Minifying code, also known as minification, is the process of removing all unnecessary characters from the source code without altering its functionality. This typically means the removal of whitespace, comments, and semicolons to allow for compact file sizes. Minification is one of the main methods of reducing load times and bandwidth usage on websites.

In this tutorial I'll share a quick shortcut that automatically creates a new file with our minified code, so that we can still code comfortably (without minfication) in our default files.

Example:

   // return random number between 1 and 6
function dieToss() {
  return Math.floor(Math.random() * 6) + 1;  
}
// function returns a promise that succeeds if a 6 is tossed
function tossASix() {
  return new RSVP.Promise(function(fulfill, reject) {
    var number = Math.floor(Math.random() * 6) + 1;
    if (number === 6) {
      fulfill(number);
    } else {
      reject(number);
    }
  });
}
// display toss result and launch another toss
function logAndTossAgain(toss) {
  console.log("Tossed a " + toss + ", need to try again.");
  return tossASix();
}

function logSuccess(toss) {
  console.log("Yay, managed to toss a " + toss + ".");
}

function logFailure(toss) {
  console.log("Tossed a " + toss + ". Too bad, couldn't roll a six");
}
// use promise paradigm to try three times to toss a 6
tossASix()
  .then(null, logAndTossAgain)   //Roll first time
  .then(null, logAndTossAgain)   //Roll second time
  .then(logSuccess, logFailure); //Roll third and last time

Minified:

function dieToss(){return Math.floor(6*Math.random())+1}function tossASix(){return new RSVP.Promise(function(a,b){var c=Math.floor(6*Math.random())+1;6===c?a(c):b(c)})}function logAndTossAgain(a){return console.log("Tossed a "+a+", need to try again."),tossASix()}function logSuccess(a){console.log("Yay, managed to toss a "+a+".")}function logFailure(a){console.log("Tossed a "+a+". Too bad, couldn't roll a six")}tossASix().then(null,logAndTossAgain).then(null,logAndTossAgain).then(logSuccess,logFailure);

Step 1

Install the MinifyAll extension on Visual Code Studio by Jose Gracia Berenguer.

Step 2

Modify the extension settings:
   ☐ Minify On Save
   ☑ Minify On Save To New File
   ☐ Open Minified Document
   -min Prefix on new minified file

Note: You may also disable specific file extensions (i.e. HTML files)

Step 3

Update the file references in our web app to the minified files. For example, to update our CSS in React we'll replace the following line in our our App.js file:

import './App.css';

with:

import './App-min.css';

Conclusion

Now that our extension is properly setup and our web application is linked to the -min version of our files, we can continue to code in our regular (without minfication) files. Each time that we save, the -min file(s) in our directory will instantly be created/updated with the minfified code.

Tip: Try accomplishing this goal with CSS files to become comfortable with the extension, and then branch out to different file types.