Question

I am currently trying to bundle my javascript so I can receive a higher score in page speed/yslow. But i am running into walls with this approach. I am currently using this TUTORIAL as guidance to bundle the js files. I am calling the js files but in the firefox tool is showing that the file bundle.js does not exists which is true but with the htaccess i am chaning the file from bundle.php to bundle.js. But I am not getting any results. Can someone help me pinpoint the issue or is there a better approach to bundle js files?

HERE is my EXAMPLE. When working properly with the js files it should show 4 input fields for file uploads.

This is how I am calling the js files

<script src='core/bundle.js?js=js/jquery-ui-1.8rc2.custom.min.js,js/globalFunctions.js,js/uploaderPreviewer.js,js/itemForm.js&amp;m=4948599067'>
</script>

.htacces to change file type*

RewriteEngine on
RewriteRule ^bundle.js$ bundle.php [QSA,L]

core/bundle.php

include "JSMin.php";
$path    = "../../";
$files   = explode(",", $_GET['js']);
$missing = array();

$cache = '';
foreach ($files as $index => $file) {
    if (strtolower(substr($file, -2)) != 'js') {
        unset($files[$index]);
    } else if (file_exists($path.$file)) {
        $cache .= $file;
        $cache .= filemtime($path.$file);
    } else {
        $missing[] = $file;
        unset($files[$index]);
    }
}

$cache = 'cache/'.md5($cache);

if (count($missing)) {
    header("Content-type: text/javascript");
    header("Pragma: no-cache");
    header("Cache-Control: no-cache");
    echo "alert('Could not load the following javascript source files:\\n\\n- ".implode("\\n- ", $missing)."\\n\\nJavascript not loaded / running!');";
    exit;
}

if (count($files)) {
    // create cached version if not present
    if (!file_exists($cache)) {
        $js = '';
        foreach ($files as $file) {
            $js .= JSMin::minify(file_get_contents($path.$file));
        }

        file_put_contents($cache, $js);
    }

    // calculate last-modified & etag send caching headers
    $last_modified_time = filemtime($cache);
    $etag = md5_file($cache);

    header("Content-type: text/javascript");
    header("Pragma: public");
    header("Cache-Control: public");
    header("Last-Modified: ".gmdate("D, d M Y H:i:s", $last_modified_time)." GMT");
    header("Etag: ".$etag); 

    if (@strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) == $last_modified_time || trim($_SERVER['HTTP_IF_NONE_MATCH']) == $etag) { 
        header("HTTP/1.1 304 Not Modified");
        exit;
    }

    readfile($cache);
}

Answer 1

Here’s what I’ve been using successfully for many years (no .htaccess needed):

In html:

<script type = "text/javascript" src = "js/scripts.php?build=12345&load=script1,script2,script3,folder/script4"> </script> <!-- do not specify the .js extension -->

In php (file scripts.php):

<?php
error_reporting(E_ERROR);
// see http://web.archive.org/web/20071211140719/http://www.w3.org/2005/MWI/BPWG/techs/CachingWithPhp
// $lastModifiedDate must be a GMT Unix Timestamp
// You can use gmmktime(...) to get such a timestamp
// getlastmod() also provides this kind of timestamp for the last
// modification date of the PHP file itself
function cacheHeaders($lastModifiedDate) {
    if ($lastModifiedDate) {
        if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) >= $lastModifiedDate) {
            if (php_sapi_name()=='CGI') {
                Header("Status: 304 Not Modified");
            } else {
                Header("HTTP/1.0 304 Not Modified");
            }
            exit;
        } else {
            $gmtDate = gmdate("D, d M Y H:i:s \G\M\T",$lastModifiedDate);
            header('Last-Modified: '.$gmtDate);
        }
    }
}

// This function uses a static variable to track the most recent
// last modification time
function lastModificationTime($time=0) {
    static $last_mod ;
    if (!isset($last_mod) || $time > $last_mod) {
        $last_mod = $time ;
    }
    return $last_mod ;
}

lastModificationTime(filemtime(__FILE__));
cacheHeaders(lastModificationTime());
header("Content-type: text/javascript; charset: UTF-8");

ob_start ("ob_gzhandler");

foreach (explode(",", $_GET['load']) as $value) {
    if (is_file("$value.js")) {
        $real_path = mb_strtolower(realpath("$value.js"));
        if (strpos($real_path, mb_strtolower(dirname(__FILE__))) !== false || strpos($real_path, mb_strtolower(dirname(dirname(__FILE__)).DIRECTORY_SEPARATOR.'modules'.DIRECTORY_SEPARATOR)) !== false) {
            lastModificationTime(filemtime("$value.js"));
            include("$value.js");echo "\n";
        } 
    }
}
?>

This compresses, merges and caches the js files