How to 'minify' Javascript code

Question

JQuery has two versions for download, one is Production (19KB, Minified and Gzipped), and the other is Development (120KB, Uncompressed Code).

Now the compact 19kb version, if you download it, you will see is still a javascript executable code. How did they compactify it? And how can I 'minify' my code like that too?

Answer 1

There’s a nice comparison of JavaScript compressors you should take a look at.

Answer 2

Along with minifying you can base64 encode it too. It makes your file much more compressed. I'm sure you have seen js files that are wrapped inside an eval() function with parameters (p,a,c,k,e,r) passed. I read it in this article How to Minify a Javascript File?

Answer 3

Google just made available a javascript compiler that can minify your code, elimiated dead code branches and more optimizations.

google javascript compiler

Regards
K

Answer 4

There are currently 2 ways of minifying your code:

1. you apply minifiers at the backend side of your application - here the advantage is that you can apply versioning and are more in control of your code - you can practically fully automate the process of minification and best practice would be to apply it before your code is uploaded to the server - this is best used when you have a lot of frontend (to be minified) Javascript and CSS code:

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

Many such tools are available for Node and npm as well - it's good practice to automate the mnification of Javascript with Grunt.

2. you can use some of the existing free tools for minification that are running online - these practically allow you to do the same, but manually. I would advice you to use them when the amount of your javascript / css code is smaller - not many files

http://www.modify-anything.com/

Answer 5

I have written a tiny script which calls a API to get your script minified, check it out:

#!/usr/bin/perl
use strict;
use warnings;
use LWP::UserAgent;
use HTTP::Request;
use Fcntl;

my %api = ( css => 'https://cssminifier.com/raw', js => 'https://javascript-minifier.com/raw' );

my $DEBUG = 0;

my @files = @ARGV;

unless ( scalar(@files) ) {
    die("Filename(s) not specified");
}

my $ua = LWP::UserAgent->new;

foreach my $file (@files) {
    unless ( -f $file ) {
        warn "Ooops!! $file not found...skipping";
        next;
    }

    my ($extn) = $file =~ /\.([a-z]+)/;

    unless ( defined($extn) && exists( $api{$extn} ) ) {
        warn "type not supported...$file...skipping...";
        next;
    }

    warn "Extn: $extn, API: " . $api{$extn};

    my $data;

    sysopen( my $fh, $file, O_RDONLY );
    sysread( $fh, $data, -s $file );
    close($fh);

    my $output_filename;

    if ( $file =~ /^([^\/]+)\.([a-z]+)$/ ) {
        $output_filename = "$1.min.$2";
    }

    my $resp = $ua->post( $api{$extn}, { input => $data } );

    if ( $resp->is_success ) {
        my $resp_data = $resp->content;
        print $resp_data if ($DEBUG);
        print "\nOutput: $output_filename";

        sysopen( my $fh, $output_filename, O_CREAT | O_WRONLY | O_TRUNC );
        if ( my $sz_wr = syswrite( $fh, $resp_data ) ) {
            print "\nOuput written $sz_wr bytes\n";
            my $sz_org = -s $file;

            printf( "Size reduction %.02f%%\n\n", ( ( $sz_org - $sz_wr ) / $sz_org ) * 100 );
        }   
        close($fh);
    }
    else {
      warn: "Error: $file : " . $resp->status_line;
    }
}

Usage:

./minifier.pl a.js c.css b.js cc.css t.js j.js [..]

Answer 6

I recently needed to perform the same task. While the compressors listed at The JavaScript CompressorRater do a great job and the tool is very useful, the compressors were not playing nice with some jQuery code I am using ($.getScript and jQuery.fn checks). Even the Google Closure Compressor choked on the same lines. While I could have eventually ironed out the kinks it was far to much squinting to do constantly.

The one that finally worked without issue was UglifyJS (thanks @Aries51), and the compression was only slightly less than all the others. And similar to Google it has a HTTP API. Packer is also nice and has language implementation in Perl, PHP, and .NET.