Prototype.js is a very popular AJAX framework used when building dynamic websites. You will find Prototype in most Ruby on Rails projects as it is included by default, and for good reason; Prototype.js is a great library that includes a lot of functionality.
Unfortunately it is rather large in size, weighing in at roughly 50KB.
Although many have managed to reduce the file size of Prototype by paring down the code and gzipping the file, we’re going to use an additional tool to approach the problem, one from the Mozilla foundation that appears to work very well – Rhino.
(Oh, in the interest of full disclosure, I am a Java fanboy, having studied at a university that got a lot of Sun funding back in the day. I hope you can see past that and check out this Javascipt hack, I really do.)
An informative quote from the Mozilla page for the Rhino project goes like this:
“Rhino is an open-source implementation of JavaScript written entirely in Java. It is typically embedded into Java applications to provide scripting to end users.”
Alright then, so what you have is a Java bytecode version of Javascript that will work in most browsers.
Sounds interesting, let’s see what we can do with Protoype.js!
I decided early on to use a Rhino tool that I found on the Dojo site that allows me to compile Javascript and make it Rhino compatible. The page give you a brief walkthrough and some examples on how to use the tool, so I won’t need to cover that here in detail.
So we compile our Prototype Javascript file, let’s see what our results are then, shall we?
Before: 47445
After Rhino: 32716
After Rhino and gzip: 9454
So it’s at about 9KB now!
In order to utilize the new file, upload it to the directory that houses your original Prototype javascript file, then any instances of prototype.js in your code to prototype.jgz (zipped javascript).
You’ll also want to change your .htaccess file so that you handle the new script properly by typing pico (or nano or vi or what-have you) .htaccess:
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} ".*Safari.*" [OR]
RewriteCond %{HTTP:Accept-Encoding} !gzip
RewriteRule (.*)\.jgz$ $1\.js [L]
AddType "text/javascript;charset=UTF-8" .jgz
AddEncoding gzip .jgz
You'll notice here that we're doing user agent detection for Safari. When I did my testing it seemed to be spotty, so what we're doing is falling back to javascript if we see that the user is using Safari. We're still compatible, and the code works everywhere else.