Gyorsabb JavaScript és CSS letöltés I.

Épp egy nagyobb alkalmazást fejlesztek épp, és felmerült, hogy a több mint 10 JavaScript és kb. 5 CSS állományt hogyan lehetne gyorsabban levarázsolni a klienshez. Arra jutottam, hogy első lépésben a kérések számát kell csökkenteni. Magyarul fűzzük össze egy állományba az összes JavaScriptet, és egy másikba az összes CSS-t, mentsük el, és ha az utolsó lekérés óta nem változott a forrás állományok tartalma, akkor ezt a mentett állományt adjuk ki.

A csökkent kérés-válasz számon kívül, másik — bár nem olyan látványos — előny hogy a weblap fejlécében összesen egy JS, és egy Style hivatkozás lesz, ezzel is csökken a letöltendő adat mennyisége.

function headerFiles( array $files, $mode, $fileType, $prefix ) {
    if ( count( $files ) > 0) {
        if ( $mode == 'list' ) {
            foreach ( $files as $f ) {
                if ( $fileType == 'css' ) {
                    echo '<link rel="stylesheet" type="text/css" href="'. $prefix.$f.'" />';
                }
                elseif ( $fileType == 'script' ) {
                    echo '<script type="text/javascript" src="'. $prefix.$f.'"></script>';
                }
            }
        }
        elseif ( $mode == 'one' ) {
            $dirname = dirname($_SERVER['SCRIPT_FILENAME']);
            $extension = $fileType == 'script' ? 'js' : 'css';
            $Hashes = array();
            foreach ( $files as $f ) {
                $Hashes[] = sha1_file( $dirname.$f );
            }
            $name = sha1( join(';#%#;', $Hashes) );
            $fileName = "{$dirname}/public/cache/{$name}.{$extension}";
            if ( !is_file( $fileName ) ) {
                $Content = '';
                foreach ( $files as $f ) {
                    if ( is_file( $dirname.$f ) ) {
                        $Content .= "/*START file: {$f}*/\n";
                        $Content .= file_get_contents( $dirname.$f );
                        $Content .= "\n/*//END file: {$f}*/\n";
                    }
                }
                file_put_contents( $fileName, $Content );
            }
            headerFiles( array( "/public/cache/{$name}.{$extension}" ), 'list', $fileType, $prefix );
        }
    }
}

Használat:

<?php
$mode = 'list';
//$mode = 'one';

$Scripts = array(
    // mindig a jQuery az elsÅ‘
     '/public/jquery-1.2.3.js'
    // jQuery Pluginok, Addonok
    ,'/public/jquery/form.js'
    ,'/public/jquery/superfish.js'
    ,'/public/jquery/tablesorter.pack.js'
    ,'/public/jquery/fckeditor.js'
    ,'/public/jquery/delegate.js'
    ,'/public/jquery/validate.js'

    // és az utolsó a saját script
    ,'/public/sajat.script.js'
);
$CSS = array(
    ,'/public/style/superfish.css'
    ,'/public/style/menu.css'
    ,'/public/style/selectbox.css'
    ,'/public/style/thickbox.css'
    // saját CSS
    ,'/public/style/sajat.css'
);
echo '<?xml version="1.0" encoding="UTF-8" ?>'."\n";
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>TITLE</title>
<?php
    headerFiles( $Scripts, $mode, 'script', $this->baseUrl );
    headerFiles( $CSS, $mode, 'css', $this->baseUrl );
?>
...