Magentix - blog Magento

L'idée est de supprimer l'ensemble des caractères superflus des fichiers CSS et JavaScript lors de la requête du serveur : espaces, commentaires, tabulations... Cette technique permet de conserver des fichiers compréhensibles pour faciliter la maintenance, tout en supprimant pas loin de 50ko de données à télécharger pour l'internaute (sur un Magento de base).

Un script PHP simpliste et 2 règles de réécritures suffisent. Selon le type de fichier (css ou js), on applique des règles de compressions différentes, gérées par un fichier placé à la racine que nous nommerons compress.php.

Dans un premier temps éditons le fichier .htaccess pour établir les nouvelles règles de réécriture :

.htaccess

# ... #

############################################
## enable rewrites

    Options +FollowSymLinks
    RewriteEngine on

############################################
## you can put here your magento root folder
## path relative to web root

    RewriteBase /
    
############################################
## enable CSS and JS compression

    RewriteRule (.*)\.css$ compress.php?file=$1.css [L]
    RewriteRule (.*)\.js$ compress.php?file=$1.js [L]

# ... #

Lors de l'appel d'un fichier CSS ou JS c'est désormais le contenu du fichier compress.php qui sera généré. On indique en GET le chemin vers le fichier à compresser.

Nous pouvons ensuite créer et éditer le fichier compress.php :

compress.php

<?php

$file = isset($_GET['file']) ? $_GET['file'] : null;

if(!(preg_match('#.css$#',$file) || preg_match('#.js$#',$file))) die;

$stream = is_file($file) ? fopen($file, 'r') : null;

if(preg_match('#.css$#',$file) && $stream) {
     header('Content-type: text/css');

     $rm = array(
                    "\r\n"=>"","\n"=>"","\r"=>"","\t"=>"",
                    ": "=>":"," :"=>":",
                    "; }"=>"}",";}"=>"}",
                    " { "=>"{","{ "=>"{"," {"=>"{","} "=>"}"," }"=>"}",
                    "; "=>";"," ;"=>";",
                    ", "=>","," ,"=>""
               );

     echo strtr(preg_replace('#/\*.*?\*/#s','',stream_get_contents($stream)),$rm);
}

if(preg_match('#.js$#',$file) && $stream) {
     header('Content-type: application/x-javascript');

     echo preg_replace('/[\n\r]\s\s+/',"\n",stream_get_contents($stream));
}

?>

Dans le cas où le fichier est de type CSS, nous supprimons la totalité des espaces superflus et les retours à la ligne. Ainsi si le fichier style.css présente la portion de code suivant :

style.css

/*** Lien box ***/
.box span a {
     color:#2f2f2f;
     text-align:center;
     background:#496778;
}

Il deviendra :

style.css

.box span a{color:#2f2f2f;text-align:center;background:#496778}

Pour les fichiers JavaScript nous supprimons simplement les espaces situés en début de ligne, afin d'éviter les dysfonctionnements.

Sur un Magento 1.4 de base nous obtenons un gain de 17ko sur l'ensemble des fichiers CSS, et un gain de 37ko sur la totalité des fichiers JavaScript utilisés par la plateforme.