How to 'minify' JavaScript code, like jQuery is minified

Question

jQuery has two versions for download. One is Production (19 KB, minified and gzipped), and the other is Development (120 KB, uncompressed code).

Now the compact 19 KB 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?

• KalEl: Especially, is there any online utility which lets me do this?
• Aries51: I stumbled upon this old post with the same questions, so good question! Some good basic info: thiscouldbeuseful.com/2012/09/minified-js-for-beginners.html.

Answer 1

DIY Minification

No minifier can compress bad code properly.

In this example, I just want to show how much a minifier does.

What you should do before you minify

And regarding jQuery... I don't use jQuery. jQuery is for old browsers; it was made for compatibility reasons. Check Can I use ; almost everything works in every browser (also Internet Explorer 10 is standardized now). I think now it's just here to slow down your web application... If you like the $(), you should create your own simple function. And why bother to compress your code if your clients need to download the 100 KB jQuery script every time? How big is your uncompressed code? 5-6 KB...? Not to talk about the tons of plugins you add to to make it easier.

Original Code

When you write a function you have an idea, start to write stuff and sometimes you end up with something like the following code.The code works.Now most people stop thinking and add this to a minifier and publish it.

function myFunction(myNumber){
 var myArray = new Array(myNumber);
 var myObject = new Object();
 var myArray2 = new Array();
 for(var myCounter = 0; myCounter < myArray.length; myCounter++){
 myArray2.push(myCounter);
 var myString = myCounter.toString()
 myObject[myString] = (myCounter + 1).toString();
 }
 var myContainer = new Array();
 myContainer[0] = myArray2;
 myContainer[1] = myObject;
 return myContainer;
}

Here is the minified code (I added the new lines):

Minified using (http://javascript-minifier.com/)

function myFunction(r){
 for(var n=new Array(r),t=new Object,e=new Array,a=0;a<n.length;a++){
 e.push(a);
 var o=a.toString();
 t[o]=(a+1).toString()
 }
 var i=new Array;
 return i[0]=e,i[1]=t,i
}

But are all those variables, ifs, loops, and definitions necessary?

Most of the time, NO!

1. Remove unnecessary if,loop,var
2. Keep a copy of your original code
3. Use the minifier

OPTIONAL (increases the performance & shorter code)

1. use shorthand operators
2. use bitwise operators (don't use Math)
3. use a,b,c... for your temp vars
4. use the old syntax (while,for... not forEach)
5. use the function arguments as placeholder (in some cases)
6. remove unneccessary "{}","()",";",spaces,newlines
7. Use the minifier

Now if a minifier can compress the code your doing it wrong.

No minifier can compress properly a bad code.

DIY

function myFunction(a,b,c){
 for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
 return[b,c]
}

It does exactly the same thing as the codes above.

Performance

http://jsperf.com/diyminify

You always need to think what you need:

Before you say "No one would write code like the one below" go and check the first 10 questions in here ...

Here are some common examples I see every ten minutes.

Want a reusable condition

if(condition=='true'){
 var isTrue=true;
}else{
 var isTrue=false;
}
//same as
var isTrue=!!condition

Alert yes only if it exists

if(condition==true){
 var isTrue=true;
}else{
 var isTrue=false;
}
if(isTrue){
 alert('yes');
}
// The same as
!condition||alert('yes')
// If the condition is not true alert yes

Alert yes or no

if(condition==true){
 var isTrue=true;
}else{
 var isTrue=false;
}
if(isTrue){
 alert('yes');
}else{
 alert('no');
}
// The same as
alert(condition?'yes':'no')
// If the condition is true alert yes else no

Convert a number to a string or vice versa:

var a=10;
var b=a.toString();
var c=parseFloat(b)
// The same as
var a=10,b,c;
b=a+'';
c=b*1
// Shorter
var a=10;
a+='';// String
a*=1;// Number

Round a number

var a=10.3899845
var b=Math.round(a);
// The same as
var b=(a+.5)|0; // Numbers up to 10 decimal digits (32bit)

Floor a number

var a=10.3899845
var b=Math.floor(a);
// The same as
var b=a|0;//numbers up to 10 decimal digits (32bit)

switch case

switch(n)
{
case 1:
 alert('1');
 break;
case 2:
 alert('2');
 break;
default:
 alert('3');
}
// The same as
var a=[1,2];
alert(a[n-1]||3);
// The same as
var a={'1':1,'2':2};
alert(a[n]||3);
// Shorter
alert([1,2][n-1]||3);
// Or
alert([1,2][--n]||3);

try catch

if(a&&a[b]&&a[b][c]&&a[b][c][d]&&a[b][c][d][e]){
 console.log(a[b][c][d][e]);
}
// This is probably the only time you should use try catch
var x;
try{x=a.b.c.d.e}catch(e){}
!x||conole.log(x);

More if

if(a==1||a==3||a==5||a==8||a==9){
 console.log('yes')
}else{
 console.log('no');
}
console.log([1,3,5,8,9].indexOf(a)!=-1?'yes':'no');

But indexOf is slow. Read this: How do I check if an array includes a value in JavaScript?

Numbers

1000000000000
// The same as
1e12
var oneDayInMS=1000*60*60*24;
// The same as
var oneDayInMS=864e5;
var a=10;
a=1+a;
a=a*2;
// The same as
a=++a*2;

Some nice articles/sites I found about bitwise/shorthand:

http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/

http://www.140byt.es/

http://www.jquery4u.com/javascript/shorthand-javascript-techniques/

There are also many jsperf sites showing the performance of shorthand & bitwise if you search with your favorite search engine.

I could go one for hours.. but I think it's enough for now.

If you have some questions, just ask.

And remember:

No minifier can compress properly bad code.

• alttag: There is hardly any reason to hand-minify code. Write code that is easily understood by other developers (or you, 10 months later). Yes, simpler is better. Use a minified in an automated build process that preserves the original. In almost every case, any speed gains from hand-optimization are far, far outweighed by the cost of developers deciphering minified code.
• cocco: depends what you are doing. if your working with animations/canvas, huge datasets & file manipolation for example, a fast code is very important, especially on mobile devices...the point is, for some developers it's hard to read.yeah... i write code since the pentium 2 .. so probably 1998, i can read the code and in my experience i have less code to check for errors.And about the speed.. mh, your wrong. Performance increases using bitwise/and shorthand in complex functions is insane.expecially testing on various devices/browsers.use google shorthandbitwise javascript and you find many examples
• DanMan: Re your rounding example: (10.4899845 +.5)|0 results in 10 instead of 11.
• Donald Rich: The DIY code just got added to my "over optimized" file. It does NOT do exactly what the original code does when a value less than zero is provided (myNumber or a). The original code throws an exception and the "improved" code goes into an infinite loop.
• donkz: That sounds like such a bad advice from supportability perspective

Answer 2

You could use one of the many available JavaScript minifiers.

• YUI Compressor
• Google closure compiler
• Dean Edwards packer
• JSMin

• MartyIX: I understand that YUI Compressor is deprecated in favor of UglifyJS (demo).

Answer 3

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

Google JavaScript compiler

Answer 4

If you are using the Visual Studio Code editor, there are lots of plugins/extensions available.

The MinifyAll, for instance, is a very good one. It is compatible with many extensions.

Install it and reload Visual Studio Code. Then click on your file, open Command Palette (Ctrl + Shift + P), and type minify this document (Ctrl + Alt + M). There are other available options, like preserve the original document and so on! Easy!

Answer 5

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.

Answer 6

Along with minifying, you can Base64 encode it too.

It makes your file much more compressed. I'm sure you have seen JavaScript 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 [sic] can I minify a Javascript [sic] file?

• beliha: base64 encode doesn't compress your code, it does exactly the opposite, you end up with more characters. You can LZH Compress your string, someone created a JS script on github that does LZH Compression on strings named:lz-string, you can use that to compress your code: pieroxy.net/blog/pages/lz-string/index.html

Answer 7

I have written a tiny script which calls an 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 8

There are currently two 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:

   YUI Compressor

   Many such tools are available for Node.js and npm as well. It's good practice to automate the minification 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/

• user13993546: you can also try these online tools like for CSS minify-beautify.com/minify-css-online for SQL minify-beautify.com/sql-formatter-online
• Peter Mortensen: The www.modify-anything.com link is broken (also as HTTPS): "Hmm. We’re having trouble finding that site."

Answer 9

You can use the JavaScript minifier of ubercompute.com to minify your code. It will minify your JavaScript code up to 75% of their original version.

• Mohit Swami: Not working as the website facing issue itself. when try to upload file upload button not working.
• Abhishek Singh: Thank you @MohitSwami for informing us about the bug, but there is no such kind of bug that you reporting, But it may occur with you due to a temporary server outage.
• Mohit Swami: Yes right it was due to a temporary server outage. it is working now. Thank You.