DEV Community

Cover image for Minify Code Automatically
aryaziai
aryaziai

Posted on • Updated on

Minify Code Automatically

Requirements


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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (4)

Collapse
 
josee9988 profile image
Jose Gracia Berenguer

Hey, thanks for reviewing my extension ❤️

Collapse
 
aryaziai profile image
aryaziai

dude nice work! Just added your name next to the link

Collapse
 
sergiojuniordeveloper profile image
sergiojuniordeveloper

MinifyAll is Wonderful, it made my site load much faster.

I just need to learn how to configure MinifyAll in VSCODE, that the min output file, all constants and function names are renamed to shorter names, can someone help me?

Collapse
 
mehditayebi profile image
Mehdi Tayebi

This extension " not format this file type yet (postcss), use a valid one."