Oli Warner About Contact Oli on Twitter Subscribe

AutoPacker - Optimise your JavaScript

Saturday, 17 November 2007 javascript php webdev

Do you juggle several JavaScript files around your site? Too much effort to compress them down? Now you can compress them down as soon as you edit a file without having to run the files through an external tool, all done transparently and on the fly.

AutoPacker is a project I’ve been hacking around with for the past few weeks and I’ve just gone over the final bits and bobs and have decided it is now time to push it out there. AutoPacker (AP, hereon) is a PHP script to automatically compress your JS files. I built it to make my life as easy as possible when dealing with my JS files — so hopefully it can make things easier for you too.

AP is based on Nicolas Martin’s PHP port of Dean Edwards’ packer.

What does AutoPacker do? It combines your JavaScript files in alphabetical order (see installation notes) and runs that through a compressor, creating a packed.js file for runtime and a unpacked.js for debugging and legal purposes (comments and licenses announcements are preserved).

Why compress though? By packing your files into one, you reduce the number of file downloads — speeding things up for both your users and your server. On top of this, compression means you can more than half the size of the file, making it quicker to download and reducing your bandwidth usage.

I use AutoPacker for ThePCSpy.com and it compresses 173KB into just 48KB!

Requirements

License

LGPL 2.1

Download

Installation

  1. Start by extracting the files in the archive into a new directory on your server. For the purposes of this howto, I’ll assume we’re using a directory called /j/ — meaning you should have the following files:

    • bak.htaccess
    • class.JavaScriptPacker.php
    • pack.php
    • packed.js
    • unpacked.js

  2. Copy your .js files into /j/

  3. Files are parsed and compressed alphabetically so you need to rename your files so they are in the correct order. For example, if I have 2 files: framework.js and ascript.js — where ascript.js depends on framework — you should rename your files accordingly:

    • 1.framework.js
    • 2.ascript.js

  4. For fully automated packing, rename bak.htaccess to .htaccess

  5. Test your installation by going to /j/pack.php?debug=1

    Assuming everything is working, you should get the following output:

    Reading directory
Checking freshness
    Last run: 1195292001
    1.framework.js last edit: 1195189737
    2.ascript.js last edit: 1195296428
Needs regeneration.
    Reading 1.framework.js
    Reading 2.ascript.js
Writing to unpacked.js
Done. Result is ~173KB.
Loading Packer
Writing to packed.js
Done. Result is ~48KB.

  6. You’re now ready to plug your page into /j/packed.js

Additional notes

If you want to have the packed.js and file updated automatically when you edit one of your dependant files, make sure the bak.htaccess is renamed to .htaccess — if you’d rather update manually, just call: /j/pack.php after uploading.

When put in automatic mode, AP will only compress when the file changes, saving a lot of CPU time. That said, if your site is busy or your server is underpowered, you may wish to run AP manually, or only enable the .htaccess file when you’re actively developing your JavaScript.

If you’re using a self-compressing framework like Mootools, I suggest you use their uncompressed download for the best compression and speed. Compressing compressed files is possible, it just doesn’t compress as well and performs quite slow.

I hope it works, I hope you like it and I’m open to suggestions if you think it needs something adding to it. Just drop a comment in below.