Alister Cameron // Blogologist

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

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.

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

13 Comments

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

  1. Posted 8 years, 9 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?

  2. Alister
    Posted 8 years, 9 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

  3. Posted 8 years, 3 months ago // Permalink

    Hi Alister,

    Nice work on the scriptaculous.shrunk.js.

    Do you have an updated version?

    Cheers,
    Trav.

  4. Alister
    Posted 8 years, 3 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

  5. Martin
    Posted 7 years, 2 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?

  6. Alister Cameron
    Posted 7 years, 2 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.

  7. Posted 6 years, 10 months 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!

  8. Posted 6 years, 9 months ago // Permalink

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

  9. Alister Cameron
    Posted 6 years, 9 months 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

  10. Posted 6 years, 4 months ago // Permalink

    Nice! I’ll be sure to use this in some projects. How long did this take you, out of curiosity?

  11. Posted 6 years, 2 months ago // Permalink

    Hey,

    Randomly ended up here.. but prototype.js breaks in places because of how they’ve written some functions, e.g:

    randomFunction = {
    test : function() {
    alert(‘here’);
    return false;
    },
    anotherTest : function() {
    alert(‘hello again’);
    return false;
    }
    }

    See how that function doesn’t end with a semicolon? I’m pretty sure thats the reason prototype breaks when compressed / put on one line.

    Hope this helps a bit. Great work btw!

    Sean
    http://www.intuitiv.net

  12. Posted 6 years, 2 months ago // Permalink

    this should definitely speed things up as i am only on dsl, thanks!

  13. Posted 6 years, 2 months ago // Permalink

    I really like your post on comments I read, its truly an untapped market to be able to consolidate comments in one place, perhaps a universal login.

17 Trackbacks/Pingbacks

  1. 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

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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]

  7. view blog

  8. [...] Prototype.js + Scriptaculous in one file under 50Kb! | Alister Cameron, Blog Consultant [...]

  9. [...] 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/ [...]

  10. [...] 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/ [...]

  11. [...] 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 [...]

  12. [...] 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 [...]

  13. [...] only would you need Prototype itself, but you would need to use Scriptaculous as well. Combined and compressed to the max, they rank in at a relatively whopping 50k. Relatively speaking, that’s a massive difference, [...]

  14. [...] per esempio ho appena trovato questo http://www.alistercameron.com/2006/…ile-under-50kb/ Grazie, GRAZIE [...]

  15. [...] "non ufficiali", sorte proprio per ovviare a questa mancanza, come Protoculous o un Prototype + Scriptaculous in meno di 50 KB. Molto si può dire sul fatto che talvolta, nella "corsa alla minimizzazione", si creano [...]

  16. [...] gelegen haben. Auf der Suche nach anderen Versionen bin ich auf dieses Teilchen gestoßen: http://www.alistercameron.com/2006/01/05/prototypejs-scriptaculous-in-one-file-under-50kb/ In mageren 50kb ist alles drin und o.g. accordion funktioniert auch – Wer es also etwas schlanker [...]

  17. [...] heaviest of all, but on my servers I use this useful shrinked version > (less than 50 KB!): > http://www.alistercameron.com/2006/01/05/prototypejs-scriptaculous-in-one-file-under-50kb/ > > Could I use this version, in addition to CDN and gzipping, it would be > fantastic. [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*

Current ye@r *

    • madmimi.com
    • splash.oiopublisher.com
    • www.medialayer.net
    • marketsamurai.com
    • Advertise Here

  • My Posts in Your In-box!

    Enter your email address here for instant updates in your inbox, whenever I post something new.
    Your email address is in safe hands. Relax!
© Copyright 2006 Alister Cameron. All Rights Reserved Theme // Sitemap // RSS