Réunir et réduire ses fichiers CSS et Javascript

Si votre serveur supporte PHP5, les fichiers JavaScript ou/et CSS peuvent être combinés en un seul fichier, en étant concaténés à la volée.

C'est Minify.
16 fichiers Javascript : 1 lien.
8 feuilles de style : 1 autre lien.
Celà réduit le nombre de requêtes effectué par le navigateur des visiteurs. Le bénéfice est un temps de chargement ainsi qu’une charge en bande passante réduits.

Minify supprime en outre tous les caractères inutiles à l’interprétation du code par les navigateurs, tels les espaces et les commentaires. Le résultat c'est un fichier de taille très réduite que Minify réduit encore en le compressant avant de le poser doucement dans un répertoire Cache. Impecable.

• • • installer minify comme à la NASA en 1957 - photo en noir et blanc

Le premier écueil est lié au script qui est codé en PHP5. Les hébergeurs n'ont pas tous PHP5, c'est le cas avec le mien : 1and1. Pour utiliser un script PHP5 sur un serveur n'utilisant que PHP4 il suffit de placer une ligne d'instruction dans votre .htaccess :
:AddType x-mapp-php5 .php
Ensuite il suffit de télécharger le fichier zip et déposer son contenu décompressé (dossier min à la racine de votre espace Web. Si vous souhaitez exécuter Minify depuis un répertoire plus profond, vous devrez modifier légèrement le code :
ouvrez le _index.js fichier du dossier Builder.
Le premier bloc de code que vous trouverez est celui-ci :


var MUB = {
_uid : 0
,_minRoot : '/min/?'
,checkRewrite : function () {
var testUri = location.pathname.replace(//[^/]*$/, '/rewriteTest.js').substr(1);
function fail() {
$('#minRewriteFailed')[0].className = 'topNote';
};
$.ajax({
url : '../f=' + testUri + '&' + (new Date()).getTime()
,success : function (data) {
if (data === '1') {
MUB._minRoot = '/min/';
$('span.minRoot').html('/min/');
} else
fail(); 
}
,error : fail
});
}

Remplacez-le par :


location.pathname.substr(0,location.pathname.lastIndexOf('/'));
var MUB = {
_uid : 0
,_minRoot : pos.substr(0,pos.lastIndexOf('/')+1)+'?'
,checkRewrite : function () {
var testUri = location.pathname.replace(//[^/]*$/, '/rewriteTest.js').substr(1);
function fail() {
$('#minRewriteFailed')[0].className = 'topNote';
};
$.ajax({
url : '../f=' + testUri + '&' + (new Date()).getTime()
,success : function (data) {
if (data === '1') {
MUB._minRoot = pos.substr(0,pos.lastIndexOf('/')+1);
$('span.minRoot').html(pos.substr(0,pos.lastIndexOf('/')+1));
} else
fail();
}
,error : fail
});
}

Ça marche ?
Non : chez 1and1 ça a merdé. Pourquoi ? Je n'en sais rien. Comme je n'avais pas mis Min à la racine, il m'a fallu bidouillé encore.
Je crois que le serveur a du mal a trouver le fichier d'index qui lance les applications (et auquel il ne faut pas toucher).
Après avoir cherché... cherché, j'ai trouvé la solution chez un guru Apache et consorts.
Dans le dossier min vous trouverez un .htaccess avec ces lignes :
IfModule Mod_rewrite.c RewriteEngine on RewriteRule ^ ([a-z ]=.*) index.php? $ 1 [L, NE] / IfModule
Changez ces lignes en collant ce code : DirectoryIndex index.php RewriteEngine on RewriteRule ([az ]=.*) http://www.yoursite.com/min/index.php? 1 $
Et l'affaire est dans le sac.
Pour protéger le répertoire des yeux indiscrets un p'tit : Order allow, deny Deny from all Et c'est bon.

Des remarques :

  1. je n'ai pas mis en route le cache car ça m'a joué des tours avec le « captcha » des commentaires
  2. si on fait l'économie de quelques kilos d'octets et de quelques requêtes le jeu ne vaut la chandelle que pour de gros sites avec une audience importante
  3. comme j'utilise déjà la compression des CSS et des JS (voir l'article « Compression GZip chez 1and1 » ) il y avait double emploi et le serveur avait du mal à suivre. Il m'a fallu supprimer de mon .htaccess à la ligne
    AddType x-mapp-php5. Php. Shtml. Html. Htm. Js. Css. Txt
    Js. et Css.. Maintenant ça tourne.

Lien


HTLML 5 et CSS 3 blog


Commentaires :

Aucun pour l'instant. Mais vous allez peut être commencer la conversation.

Les commentaires pour cet article peuvent être suivis via ce fil.


C'est pour un commentaire ?

Les champs signalés par la cloche doivent être remplis.




Si vous voulez mettre du code dans votre commentaire, ne mettez pas de crochets, sinon, la balise sera interprétée.

Je sens que je vais dire quelque chose...



math captcha