Monday, November 3, 2008

Serving minified JavaScript files with Google App Engine

JavaScript minification is the process that removes source code comments and newlines in order to create a compacted version of the file. This is especially useful when your web app is loading very large JavaScript files, minification can boost performance by cutting a big portion of the download time.

Since I host a lot of JavaScript using Google App Engine, I have made a script that can automate minification whenever JavaScript is requested. The goal is to make this process as transparent as possible. I am using Douglas Crockford JSMin in my python script.

So you just need to place all your JavaScript under a "js/" directory. When you request a file like this http://achau.appspot.com/js/cmc-core.js, this will serve original file without minification. But when you request the file with this URL http://achau.appspot.com/js_min/cmc-core.js, the minified version will be served.

To further enhance performance, I used the App Engine memcache feature so that file request will be served out of App Engine cache. This works great for stable files in production. But since files served out of memcache can be outdated (in javascript.py - default cache expires every 15 minutes), I have added extra access points to retrieve the latest copies directly from disk instead of cache. Use "js_/myfile.js" to access your original JavaScript files without hitting the cache and likewise use "js_min_/myfile.js" to access the minified JavaScript without hitting the cache.

This script can actually minfiy CSS files as well - http://achau.appspot.com/js_min/codemirror/css/jscolors.css

How to install:

1) Upload these two python scripts to your App Engine account: javascript.py and jsmin.py

2) Add this entry to your App Engine app.yaml file -
- url: /js.*
  script: javascript.py
Now your App Engine account is ready to serve minified JavaScript :)

Summary:

After the installation, you now have four different URLs to access your JavaScript files.

12 comments:

Jeffrey Scudder said...

Very cool Austin. Have you considered adding this to the App Engine Cookbook? http://appengine-cookbook.appspot.com/

Jeff said...

Awesome, I will try adding this to my site!

stan said...

I bet this script could be modified to also bundle css files....

Ben Lisbakken said...

While you're optimizing, you should add in an image spriter to take all images and combine them into one! App Engine has an image library, right? That could even be a standalone api...

Brandon said...

I'm thrilled that you wrote this. I came in on a search for "app engine minify". It's exactly what I need for my javascript-heavy app engine project.

Eventually I forsee a unified minification service that automatically minifies html, javascript, and css on the fly through memcache, just like this.

Brandon said...

By the way, there is a small bug regarding css minification: The minification works fine but the script executes the line:

self.response.headers['Content-Type'] = 'text/javascript'

which causes most browsers to reject the css.

Rafael Griffo Goes said...

Amazing! exactly what I looking for... although I didn't install it yet, as I not sure if it is better to minify the files before hand and save some server response time...


@Brandon
As you said, it has a small bug with CSS files, but I guess that could be easily fixed by adding a couple of new request handles that set the content-header accordingly

Edefiner Technology - Web Design Company said...

e- Definers Technology, Delhi based web Design Company in India provide best website design services like website development, Internet marketing (seo, smo, sem ). We offer all website design services at very cost effective price.

katty said...

JavaScript is a good program and very easy to use. I don´t like a complex program. I prefer javascript because i consider it like a device very eficient and it have a good quality.
I always looking for the quality that is why i prefer to buy viagra because i always have a great result in my sexual life.

Joe said...

You should put this on github.

Echt Einfach TV said...

http://achau.appspot.com/js/cmc-core.js

Error: Not Found
The requested URL /js/cmc-core.js was not found on this server.

Unfortunately your links are dead.

madhuri said...

Very interesting and useful post, thank you for sharing this with us.
web design company