TwitterFacebook

Minifying Javascript With the Google Closure Compiler API

Honey, I shrunk the codes
LGF • Views: 36,071
Javascript via Shutterstock

The dirty secret of these tech posts is that I often write them for myself, because they help me organize my thoughts; sometimes the process of making it simple enough and abstract enough to post about on LGF even suggests improvements to programming techniques.

And believe it or not I got an email today from someone saying they wished I’d do more of them. So that’s pretty much all the excuse I need to launch into another tech/programming article that can be treated as an open thread by the non-programmers amongst us.

A while back I wrote an article titled Tech Note: Minifying Javascript Quickly and Easily, about the method I used to compress and “minify” our Javascript files before sending them out over the interwebs.

This method has evolved quite a bit, and now LGF uses the Google Closure Compiler to perform this compression, because it does a vastly better job than the outdated minifier we were using, and also has some simple syntax checking.

If the old minifier failed in some way, it used to happily create a bad Javascript file, and you found out when you loaded the page and there was no Javascript working at all. The Closure Compiler exits gracefully with an error, a line number, and a useful message about why it failed.

There are several ways to use the Closure Compiler — as a simple web application, as a Java application that you install on a server, or as a web API using the REST protocol. This bit of nerd doggerel I’m about to foist on you shows how to use the RESTful API to generate a minified version of one Javascript file, with a Linux bash script that you execute on your server after making changes to the Javascript code.

This code sends the web URL of a Javascript file to the Closure compiler, then saves the returned minified code on your server and moves it into place with a safe rename command, so no one gets caught loading it in mid-change.

The paths and filenames are generalized here — if you use the code, fill in the proper values, then save it wherever you put your bash scripts and give it executable permissions. I use the command name lgfj for our version at LGF, to make typing easy.

To start with, we set the working directory to the path where our Javascript files are located and print out a warm, fuzzy welcome message.

#!/bin/bash

cd /path/to/javascript/files/

echo -e "\nJavascript Minifier (API version)\n"
echo "Minifying test.js with Closure Compiler..."

In order to pass the web address of a Javascript file to the Closure Compiler’s API, we need to “URL-encode” it, which means to replace some characters with special codes. We’ll use Perl’s URI::Escape module for this.

And there’s a lurking gotcha that I discovered when first working with this script: Google’s API can’t always tell when you’ve changed the code, and will use a cached version to speed things up. Since we’re only running this after we’ve made a change, we never want this behavior. So we use a simple method to force Google not to cache the file: we append the Linux date value to the Javascript file’s URL as a query string. Since this value increases every second, it changes every time we use it — so our Javascript file will always look like a different file to Google.

All this happens in the following somewhat gnarly looking line of code. The result is stored in the variable $URL.

URL=$(echo "http://yourdomain.com/js/test.js?"$(date +%s) | perl -MURI::Escape -lne 'print uri_escape($_)')

OK, now we do the actual deed and call the Closure Compiler’s API, by using Linux’s curl command with the -d flag that tells it to use the POST method. See the docs for more info on the parameters in the query string.

The resulting minified code is then written out to the file test.min.tmp.js.

curl -d "output_info=compiled_code&output_format=text&compilation_level=SIMPLE_OPTIMIZATIONS&code_url=$URL" 'http://closure-compiler.appspot.com/compile' > test.min.tmp.js

Now we set the file’s owner to whatever is appropriate, and safely move the minified file into place by renaming test.min.tmp.js to test.min.js.

echo "Creating lgf.min.js..."

chown username test.min.tmp.js
mv -f test.min.tmp.js test.min.js

echo "Completed."

Done! But let’s also share some information about what just happened. These concluding lines show the file sizes of the original Javascript file and the minified version, and the amount saved by the minification process.

OSIZE=$(stat -c%s test.js)
MSIZE=$(stat -c%s test.min.js)
echo -e "Original size: "$(printf "%'d\n" $OSIZE)" bytes"
echo -e "Minified size: "$(printf "%'d\n" $MSIZE)" bytes"
echo -e "Saved:         "$(printf "%'d\n" $(($OSIZE - $MSIZE)))" bytes\n"

Here’s the whole thing in one piece:

#!/bin/bash

cd /path/to/javascript/files/

echo -e "\nJavascript Minifier (API version)\n"
echo "Minifying test.js with Closure Compiler..."

URL=$(echo "http://yourdomain.com/js/test.js?"$(date +%s) | perl -MURI::Escape -lne 'print uri_escape($_)')

curl -d "output_info=compiled_code&output_format=text&compilation_level=SIMPLE_OPTIMIZATIONS&code_url=$URL" 'http://closure-compiler.appspot.com/compile' > test.min.tmp.js

echo "Creating lgf.min.js..."

chown username test.min.tmp.js
mv -f test.min.tmp.js test.min.js

echo "Completed."

OSIZE=$(stat -c%s test.js)
MSIZE=$(stat -c%s test.min.js)
echo -e "Original size: "$(printf "%'d\n" $OSIZE)" bytes"
echo -e "Minified size: "$(printf "%'d\n" $MSIZE)" bytes"
echo -e "Saved:         "$(printf "%'d\n" $(($OSIZE - $MSIZE)))" bytes\n"

You can also use the Closure Compiler API to compress and combine a series of Javascript files into one big file, which can save even more loading time, but that’s a subject for another nerdy nerd thread.

^ back to top ^

TwitterFacebook

Turn off all ads for a full year by subscribing!
For about 33 cents a day (per month) or 22 cents a day (per year), our subscription option turns off all advertisements at LGF!
Read more...

► LGF Headlines

  • Loading...

► Tweeted Articles

  • Loading...

► Tweeted Pages

  • Loading...

► Top 10 Comments

  • Loading...

► Bottom Comments

  • Loading...

► Recent Comments

  • Loading...

► Tools/Info

► Tag Cloud

► Contact

You must have Javascript enabled to use the contact form.
Your email:

Subject:

Message:


Messages may be published unless you request otherwise.
Tech Note:
Using the Contact Form
LGF Pages

This button leads to the main index of LGF Pages, our user-submitted articles. You can post your own LGF Pages simply by registering a free account with us.

Create a Page

This is the LGF Pages posting bookmarklet. To use it, drag this button to your browser's bookmark bar, and title it 'LGF Pages' (or whatever you like). Then browse to a site you want to post, select some text on the page to use for a quote, click the bookmarklet, and the Pages posting window will appear with the title, text, and any embedded video or audio files already filled in, ready to go.

Or... you can just click this button to open the Pages posting window right away.

Last updated: 2014-03-07 2:19 pm PST

LGF User's Guide
Recent Pages
Randall Gross
The Abortion Ship
Rebecca Gomperts is a Dutch doctor who pushes the limits of abortion law. In this excerpt from Diana Whitten's documentary "Vessel," Gomperts creates a mobile clinic aboard a ship. Produced by: Diana Whitten Read the story here: nyti.ms Subscribe ...

13 hours, 57 minutes ago
Views: 156 • Comments: 0
Tweets: 0 • Rating: 0
FemNaziBitch
Roger Goodell: ‘I Didn’t Get It Right.’ -NFL TAKES A NEW STANCE DOMESTIC VIOLENCE
NFL commissioner Roger Goodell admits he was wrong on the Ray Rice decision, and Goodell took an important step Thursday towards showing the league is serious about cracking down on domestic violence as well as sexual assault. In a ...

19 hours, 35 minutes ago
Views: 122 • Comments: 1
Tweets: 0 • Rating: 0
sagehen
Doctor Who Spoiler Thread
For those who want to post immediately... live... without having to hide spoilers behind the button.

6 days, 9 hours ago
Views: 616 • Comments: 99
Tweets: 0 • Rating: 6
EiMitch
Escapist: Maniac Cop
escapistmagazine.com Link broken? The gist is that this is an impressively sarcastic review of an old slasher flick based on the "unrealistic" premise of a cop abusing his power to murder people.

1 week ago
Views: 443 • Comments: 1
Tweets: 0 • Rating: 1
Hyped Up On Ganja
Hunt for German neo-Nazis was ‘complete disaster’
BERLIN (AP) -- Police and security services in Germany's eastern state of Thuringia bungled the hunt for three neo-Nazis, who years later turned out to be the main suspects in a far-right murder spree. Story

1 week, 1 day ago
Views: 649 • Comments: 2
Tweets: 0 • Rating: 3
Rightwingconspirator
A Lizard’s Regenerating Tail
Don't ya hate it when that happens? You feel so short for a month. Anoles are curious little lizards capable of ditching their tails when they feel threatened. This self-amputation, called autotomy, takes about 25 days for the tail to ...

1 week, 1 day ago
Views: 468 • Comments: 1
Tweets: 0 • Rating: 5
CriticalDragon1177
Io9 - Everything You Need To Know About Lemuria, The Lost Continent Of Lemurs
Esther Inglis-Arkell talks about the weirdest lost continent myth, I've ever heard. Its the only one I know of that ever included giant telepathic lemurs. No seriously! In 1858 a young zoologist, playing around with an idea, came up with ...

1 week, 1 day ago
Views: 633 • Comments: 4
Tweets: 0 • Rating: 6
Laughing Gas
Scumbag “HBD believer” claims Michael Brown charged officer
WARNING: LINK TO HATE SITE He links to some ijreview, a right wing site: This guy makes me sick.

1 week, 4 days ago
Views: 1,470 • Comments: 6
Tweets: 1 • Rating: 1
 Frank says:

This is Frank Zappa saying, Don't do speed. Speed turns you into your parents. -- this used to play OFTEN as a public service announcement(PSA) on radio station WHFS at 102.5 FM in bethesda,MD.USA during the early '70's. it was followed by a nearly inaudible whisper, "...but grass and acid are o.k.", which may have been frank, or one of the mothers.