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.
Tools for minification:
There are many websites that provide online minfication. The following websites are examples for minification.
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") } });