What is JavaScript minification?

JavaScript minification the process of removing all unnecessary characters such as comments, whitespaces and new line characters from source code without changing its functionality. It may also reduce the file size by 30% to 90%.

Benefits of minification:

Minimize the size of file by removing all comments, extra whitespaces and new line characters.

• It will reduce the download time.
• Less consumption of bandwidth over website
• Reduces the load time of server and allows more users to access the website.

Tools for minification:

There are many websites that provide online minfication. The following websites are examples for minification.

http://jscompress.com/

https://developers.google.com/closure/compiler/

Example:

Before compressed:

   function clearpopup() {

        $(".errorBlock").hide();

        $(".errorBlockMain").hide();

    }

 

    function rowchecked(ele) {

 

        var checkboxes = document.getElementsByTagName('input');

        if (ele.checked) {

            for (var i = 0; i <checkboxes.length; i++) {

                if (checkboxes[i].type == 'checkbox') {

                   checkboxes[i].checked = true;

                }

            }

        } else {

            for (var i = 0; i <checkboxes.length; i++) {

               console.log(i)

                if (checkboxes[i].type == 'checkbox') {

                   checkboxes[i].checked = false;

               }

            }

        }

    }

    function eventcssGrid() {

        var lastIdx = null;

        var table = $('#example').DataTable();

 

        $('#example tbody')

            .on('mouseover', 'td', function () {

                var colIdx = table.cell(this).index().column;

 

                if (colIdx !== lastIdx) {

                   $(table.cells().nodes()).removeClass('highlight');

                   $(table.column(colIdx).nodes()).addClass('highlight');

               }

            })

            .on('mouseleave', function () {

               $(table.cells().nodes()).removeClass('highlight');

            });

        $('th').unbind('click.DT');

 

    }

    //var specialKeys = new Array();

    //specialKeys.push(8); //Bac

    //$(function () {

    //   $(".numeric").bind("keypress", function (e) {

    //        var keyCode = e.which ? e.which :e.keyCode

    //        var ret = ((keyCode >= 48 &&keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);

    //       $(".error").css("display", ret ? "none" :"inline");

    //        return ret;

    //    });

    //   $(".numeric").bind("paste", function (e) {

    //        return false;

    //    });

    //   $(".numeric").bind("drop", function (e) {

    //        return false;

    //    });

 

    //});

After compressed: 

function clearpopup() { $(".errorBlock").hide(), $(".errorBlockMain").hide() } function rowchecked(e) { var o =document.getElementsByTagName("input"); if (e.checked) for (var c = 0; c < o.length; c++) "checkbox" == o[c].type&& (o[c].checked = !0); else for (var c = 0; c < o.length; c++) console.log(c), "checkbox" == o[c].type&& (o[c].checked = !1) } function eventcssGrid() { var e = null, o = $("#example").DataTable(); $("#exampletbody").on("mouseover", "td", function () { var c = o.cell(this).index().column; c !== e &&($(o.cells().nodes()).removeClass("highlight"),$(o.column(c).nodes()).addClass("highlight")) }).on("mouseleave", function () {$(o.cells().nodes()).removeClass("highlight") }), $("th").unbind("click.DT") } });