Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

JavaScript Minification

Suggested Videos
Part 49 - JavaScript strings and regular expressions
Part 50 - JavaScript RegExp object
Part 51 - Client side validation using regular expression



What is JavaScript Minification
JavaScript Minification is the process of reducing the script file size by removing comments, extra whitespaces and new line characters that are not needed for executing JavaScript code. JavaScript Minification may reduce the size of the file by 30 to 90%. The Minification process will not change its original functionality. 



What are the benefits of JavaScript Minification
The JavaScript files need to be downloaded to the client machine before the browser can execute your JavaScript code. Since JavaScript Minification reduces the size of the file we have the following benefits

1. Reduced download time

2. Less bandwidth consumption of your website

3. Reduced JavaScript execution time as all the comments, extra whitespaces and new line characters are removed from the minified version

4. Multiple JavaScript files can be compressed into one minified JavaScript file. This means there are now reduced number of HTTP requests to your server, which in turn reduces the load on the server and allows more users to access your website.

What are the disadvantages of JavaScript Minification
Readability is lost and debugging can be difficult as comments, extra whitespaces and new line characters are removed. However, if there is a production issue, use the non-minified version of the script file for debugging. So in production environment use minified version for performance and in development environment use non-minified version for readability and debugging.

JavaScript minification tools
JSMin : http://www.crockford.com/javascript/jsmin.html

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

YUI Compressor : http://yui.github.io/yuicompressor/

There are also several websites that provide online JavaScript minification. The following is one such website
http://marijnhaverbeke.nl/uglifyjs

Contents of the script file used in the demo
function getBrowserInfo()
{
    var ua = navigator.userAgent, tem,
    M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if (/trident/i.test(M[1])) {
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE ' + (tem[1] || '');
    }
    if (M[1] === 'Chrome') {
        tem = ua.match(/\bOPR\/(\d+)/)
        if (tem != null) return 'Opera ' + tem[1];
    }
    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
    if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
    return M.join(' ');
}

function getCurrentMonth()
{
    var today = new Date();
    var monthNumber = today.getMonth();

    var monthNames = ["January",
                      "February",
                      "March",
                      "April",
                      "May",
                      "June",
                      "July",
                      "August",
                      "September",
                      "October",
                      "November",
                      "December"];

    return monthNames[monthNumber];
}

function getCurrentWeekDay()
{
    var today = new Date();
    var dayNumber = today.getDay();

    var weekDays = ["Sunday",
                    "Monday",
                    "Tuesday",
                    "Wednesday",
                    "Thursday",
                    "Friday",
                    "Saturday"];

    return weekDays[dayNumber];

}

JavaScript tutorial

2 comments:

  1. Hello Venkat, can you place the JSscript.js at your blog. It's difficult to type it from the video dueto the regular expressions.

    ReplyDelete
    Replies
    1. Hi Harry, I have just uploaded the contents of the script file. Hope you will find it useful.

      Delete

It would be great if you can help share these free resources