Prototype.js + Scriptaculous in one file under 50Kb!

OK. Call me anal or something but I don’t like the way coders so frequently leave “fat” in their javascript. Which might be fine if everyone was on a T1 line or something, but they’re not and we need to be nice and thoughtful and stuff.

To that end, I’ve gone to the trouble of playing with the Scriptaculous JS library and Prototype.js (which comes bundled with it) and I’ve managed to pack the whole lot into one single Javascript file, weighing in at just under 50Kb.

So now you can link to just one single JS file, wherever you want the full DHTML/AJAX power of Scriptaculous.

In case you’re wondering, Prototype.js weighs in at 47Kb and the main Scriptaculous files total 91Kb. That’s a total of 138Kb shrunk down to 49Kb or a drop down to 35.5% of the original size!

Note: the only Scriptaculous file I omitted was the unit testing one. It’s not a core file anyway. Plus it would have blown the size out and I really wanted to keep under 50Kb… which does have a lovely ring to it.

Download the file here (right-mouse-click and save to disk): scriptaculous.shrunk.js

USAGE: Because I’m using the extended ASCII character set to push the compression a little hard to get it all in under 50Kb, you need to tell the client you’re using that character set. This just means adding the charset attribute correctly to the HTML head of your pages (the first line is to keep IE happy):

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <script src="wherever/scriptaculous.shrunk.js" type="text/javascript" charset="ISO-8859-1"></script>

Hope you enjoy it!

Oh, and a big hat-tip to Dean Edwards for the “Packer” magic.

Technorati Tags: Javascript, Ajax, Web, Design, prototype.js, script.aculo.us, Development

9 Comments

Note: Commenter website links are not no-followed, in case
you were wondering... I believe in rewarding commenters!

Peter Woolcock

Posted 2 years, 3 months ago // Permalink

I’m using a javascript to get mouse coordinates which is working however, I want to pass these values to rmagic using rails framework. Any idea how I might accomplish this?
Alister

Posted 2 years, 3 months ago // Permalink

Peter, I’m not the best person to ask, as I am not a Rails afficionado at all. There is a discussion list you can subscribe to called rails-spinoffs where all the real gurus hand out. Sign up for that here:

http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Trav

Posted 1 year, 10 months ago // Permalink

Hi Alister,

Nice work on the scriptaculous.shrunk.js.

Do you have an updated version?

Cheers,
Trav.
Alister

Posted 1 year, 10 months ago // Permalink

Trav,

Not right now. I did the initial one manually and it literally took hours.

The automatic way to do it would be to push it thru the Dojo ShrinkSafe app, then thru Dean Edwards’ packer. That would be ideal. But something breaks in prototype.js when you try and do that. I think it’s because prototype.js uses some very “interesting” coding in places that ShrinkSafe can’t handle safely. D’oh!

I’ll keep looking into this tho, and keep posted for an update.

- Alister
Martin

Posted 9 months ago // Permalink

I don’t know if you read comments on this old articles,but:
Do you plan to repeat this with the current version of proto and scriptlicous?
Alister Cameron

Posted 9 months ago // Permalink

@Martin - thanks for your comment. I would dearly love to maintain a shrunk version of these files here, but there are “issues” with Prototype. Basically, the shrinking breaks the JS, introducing errors. It has to do with some very particular JS code used in Prototype. I emailed Dean Edwards for help on this, but he never replied. Sad.

That said, I’ll have another look at the latest versions and see what can be done. It’s worth another go.
Web Designer Glasgow

Posted 4 months, 2 weeks ago // Permalink

HI Alistair, I’ve come to realise that any effort to shrink prototype and scriptaculous are well worth it - my server CPU maxes out to 100% when a site loads prototype and scriptaculous’ files, even when gzipped! Strange, given that an image file of the same weight doesn’t have this effect.

I’ll give your file a go!
Rodrigo

Posted 3 months, 2 weeks ago // Permalink

Do you plan do this with newly versions of prototype/scriptaculous?
Alister Cameron

Posted 3 months, 2 weeks ago // Permalink

Ridrigo and others who have asked… I would love to update this as it goes, but a) I have chosen jQuery over Scriptaculous a LONG time ago (it’s just a LOT better, in my mind) and b) I had problems with the compression that I have been unable to overcome.

So I think the short answer is I cannot help you. For which I apologise.

-Alister

12 Trackbacks/Pingbacks

By phpleo.Blog
Posted 38 years, 4 months ago

alguien había fusionado a prototype.js y script.aculo.us, pero desde hace unos días su web se encuentra inaccesible y para no perder la oportunidad me puse a googlear un poco y descubrí unas interesantes fusiones de estos dos script, vamos a ello: scriptaculous.shrunk.js - 50KB Ya un poquitin viejo y a desveladas: “5 January 2006 – 1:23 am”. . Protoculous - 54.6KB Vía: http://bloke.org/, y un poco más gordito que el anterior pero mucho más reciente. . ProtoPacked
By Static - Anti asshole spray currently out of stock :(
Posted 38 years, 4 months ago

because it’s a lot less bulky and I like programming with it better. However I can’t be arsed to change everything which is why I decided to just keep it for now and optimize it. Luckily I found Alister Cameron’s post ‘Prototype.js + Scriptaculous in one file under 50Kb!’ which made a hell of a difference. If your site uses Prototype and Scriptaculous just like mine I highly recommend using Cameron’s optimized script. So I went with Cameron’s script and pasted my own JS code at the bottom of it. I’m serving it to you
By Web 2.0 Technologies
Posted 38 years, 4 months ago

Alister Cameron has combined the Prototype and Scriptaculous libraries into one condensed file:http://www.alistercameron.com/2006/01/05/prototypejs-scriptaculous-in-one-file-under-50kb/ Web 2.0 Technologies
By Web 2.0 Technologies
Posted 38 years, 4 months ago

Alister Cameron has combined the Prototype and Scriptaculous libraries into one condensed file:http://www.alistercameron.com/2006/01/05/prototypejs-scriptaculous-in-one-file-under-50kb/ More on Ajax » , Prototype » Posted by Andre at 07:33 PM | Permalink
By Andre on Tech
Posted 38 years, 4 months ago

Alister Cameron has combined the Prototype and Scriptaculous libraries into one condensed file:http://www.alistercameron.com/2006/01/05/prototypejs-scriptaculous-in-one-file-under-50kb/ More on Ajax » , Prototype » Posted by Andre at 07:33 PM | Permalink
By javascript" in Everyone's Tags on Ma.gnolia
Posted 1 year, 3 months ago

[...] Prototype.js + Scriptaculous in one file under 50Kb! | Alister Cameron, Blog Consultant [...]
By sk_business3 joomla template with communication theme - Clipart Web Site
Posted 1 year, 3 months ago

[...] JS libraries down from 138Kb to 49Kb. Grab the one single fat-free javascript file… for free! http://www.alistercameron.com/2006/01/05/prototypejs-scriptaculous-in-one-file-under-50kb/ [...]
By [#SBTWO-1304] Consider overall page size in SB2 - E-Lab Development Issues Log
Posted 1 year, 3 months ago

[...] http://www.alistercameron.com/2006/01/05/prototypejs-scriptaculous-in-one-file-under-50kb/ [ Show » ] Chris May [31/Jan/07 11:05 AM] Actually, the previous one is 47K ! Here’s the whole lot (alegedly) in 50K. http://www.alistercameron.com/2006/01/05/prototypejs-scriptaculous-in-one-file-under-50kb/ [...]
By Scriptaculous Effects - Page 5 - Pligg Forum
Posted 1 year ago

[...] read on optimizing prototype.js - found via google - will test and report in here - if it works: http://www.alistercameron.com/2006/0…le-under-50kb/ http://www.habtm.com/articles/2006/0…g-prototype-js Last edited by dollars5 : Today at [...]
By Da Scritch Net Works
Posted 38 years, 4 months ago

Dans ma boîte à outil basique, j’y mettrais le chargement par insertion DOM, la gestion des cookies, timeout, addevent et domready. Ces fonctions primitives sont très faciles à écrire. ↑ Parmi les pages intéressantes que j’ai trouvé,Alister Cameron propose le pack prototype.js + scriptaculous.js(avec quelles extensions ?) packé en un seul fichier. Notez sa solution sur la gestion de charset appelé. [IMG]
By coComment - Site
Posted 38 years, 4 months ago

view blog
By [gel�st]Erfahrungen mit Accordion V2.0??? :: PostNuke CMS :: Open Source PHP Content Management System : Support : Forum
Posted 2 weeks ago

[...] gelegen haben. Auf der Suche nach anderen Versionen bin ich dieses Teilchen gesto�en: http://www.alis…-under-50kb/ In mageren 50kb ist alles drin und o.g. accordion funktioniert auch - Wer es also etwas schlanker [...]

Alister Cameron // Blogologist

Changing the world. One blog(ger) at a time.