Web Development

Web Development Tips & Tricks, the things that you don’t want to figure out.





Shrinking Javascript the Better Way

Hello everyone!

There are many ways to shrink or obfuscate Javascript, simply search Google and you should find plenty of results. I found that many are programs that shrink it, then you upload the new code, which I was going to use until I found a better solution.

I found two that were recommended, jspacker and JSMin. After searching for jspacker and finding their site down, I went to JSMin. I found links at the bottom for PHP code that would do it on the spot, which made me happy because I figured I could figure out a way to do something tricky with it, which I did.

Through the use of .htaccess, JSMin and another file I created, I made the site I was working on automatically shrink all my Javascript files when called, but look completely normal in Dreamweaver.

Here’s the code:

.htaccess

Options +FollowSymLinks
RewriteEngine on

RewriteRule ^js/(.*).js$ /js/minimize.php?jsPage=$1 [L]

Quick note, I keep all my Javascript files in a folder called “js” which is also where “minimize.php” is located. You can adjust this according to your setup.

includes/minimize.php

<?php
require(‘../includes/jsmin.php‘);

// Output a minified version of the Javascript file.
echo JSMin::minify(file_get_contents($_GET['jsPage'] . ‘.js’));
?>

Again, should adjust the include of the “jsmin.php” which can be downloaded here. Also, with the way I set it up, “minimize.php” must be in the same folder. You can adjust all of this however you like, but this was the best for my use.That’s it! Basically what’s happening is when the site calls your “example.js” file, it instead reads the file “minimize.php?JSPage=example”, which then minimizes and outputs the “example.js”.

-Kerry

Share and Enjoy:
  • email
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Technorati
  • Google Bookmarks
  • Furl

Tags: , , , ,

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

  1. Ashton Sanders posted the following on April 12, 2009 at 12:29 pm.

    That is sweet. I was just talking with someone about compressing Javascript. That is really a beautiful way of doing it. Now you won’t have to keep a “source file” saved somewhere on your computer.

    @Jaffer:
    I’m pretty sure, since Rewrite occurs on the server side, browsers can’t tell their are being rewritten, so there should not be a problem with caching.

  2. Gaucho posted the following on June 18, 2008 at 7:30 pm.

    Somehow i missed the point. Probably lost in translation :) Anyway … nice blog to visit.

    cheers, Gaucho.

  3. Jaffer Haider posted the following on March 4, 2008 at 1:52 am.

    Here’s the link:
    http://dean.edwards.name/packer/

    Was working for me yesterday, it is down at the moment. Hmm … keep trying, it’ll be online soon enough :)

    Also, there needs to be some sort of caching capabilities in minimize.php, right? Otherwise minifying code on every server hit will bring the server down.

  4. phoenixdev posted the following on March 2, 2008 at 4:21 pm.

    Do you have a link to where I could get JSPacker? I looked but the main website was done, I don’t know if it was temporary but that’s why I went to JSMin, as I felt JSPacker was better.

    I don’t know, I wouldn’t think it prevents them as that is, to the browser, that file. I have not tested it and could easily be wrong :) .

  5. Jaffer Haider posted the following on March 2, 2008 at 3:02 am.

    Great idea! I’ve been using JSMin for my minification requirements as well. I also tried JSPacker, which has a much higher compression level, but it requires that the code adhere to some standards (doesn’t like missing semi colons etc). It’s going to take me a while to fix all such errors in my 35K lines of JS code, but you should give jspacker a try.

    Just curious, does the rewrite rule prevent browsers from caching the JS file? Have you tested this?


Leave a reply