Oct
13
2011

Using PHP to merge and minify CSS and Javascript

And yet another ‘bangin’ update!  Don’t use this (I’m going to leave it here for reference), use the magicmin javascript and css minification/caching class instead for performance, better javascript minification, caching, gzip, base64_encoded images, and more!

One MAJOR factor in the usability of your website is site load time.  This is affected by a number of factors: the number of images, database queries, and the number of server requests to fetch your stylesheets and javascript files (which is what we’ll be talking about today!).

The following example is for javascript files, however I’ve included a JS and CSS version in the download at the bottom of the page.

The defining difference between our standard PHP file, and a CSS or JS file is the header content type.  Easy workaround!

header('Content-type: text/javascript');

Next, we’re on to a nifty little function that strips whitespace, comments, line breaks, tab stops, and all unnecessary bits:

function compress($buffer)
{
// remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// remove tabs, spaces, newlines, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}

Next, we build an array of our (in this case, JS) files…

$get_js = array('jquery.js', 'jqueryui.js', 'yourotherjsfiles.js');

And use PHP’s handy foreach function, we’ll loop through our array, ensure that the file actually exists (file_exists), add the name of the file to our output, call our compress function, trim the filename (to make sure that we can actually process it), get the contents of the file, and end our compression output:

foreach($get_js as $js)
{
$js = trim($js);
if(file_exists($js))
{
echo "/*".$js."*/";
ob_start("compress");
echo file_get_contents($js) . "\n\r";
ob_end_flush();
}
}

Then all we have to do is call our ONE file and we’re good!

<script type="text/javascript" src="js.php"></script>

[dm]6[/dm]

5 Comments + Add Comment

  • Is having a “php” extension where there was supposed to be a “js” extension harmful any way to browser’s cache?

    • No, the browser still interprets the script as being js rather than php

  • This will increase server load. For every request instead of just serving static JS file it needs to execute PHP script, which is of course slower (meaning CPU time and memory are taken). It would be better to just generate static JS file once (or on every change of code) and set src to it.

    • Very true, for each request to the page, PHP is executed. To clarify, this is an effective method of generating compressed versions of multiple files- which I failed to note in my post. Thanks for the clarification!

  • There is much more into minification than removing spaces and comments.

    Have you heard of both YUI Compressor and Kris Walsmith’s Assetic Symfony2 Bundle. It’s task is exactly to do that.

Leave a comment