Cjo - css and javascript optimizer

Soyez le premier à donner votre avis sur cette source.

Vue 6 283 fois - Téléchargée 408 fois

Description

Avec l?engouement pour le web 2.0 et ses effets javascript en tous genres, vos pages sont de plus en plus lourdes, elles incluent de nombreux fichiers javascript et css.

CJO va vous aidez mettre de l?ordre dans tout ça !

CJO va vous permettre:
  • de rassembler tout vos fichiers javascript en un seul et unique fichier js
  • de rassembler tout vos fichiers css en un seul et unique fichier css
  • de compresser à la volée vos fichiers css et js
  • de forcer et régler la durée de mise en cache de vos fichiers


Et tout ça en à peine 3 lignes de codes !

Présentation
------------

C?est en fait un ensemble de classes php qui ont été assemblées de manière à pouvoir en tirer pleinement profit le plus simplement possible.

Ma méthode utilise:
  • la version en php du Packer de Dean Edwards, un compresseur/obfuscateur de JavaScript.
  • CSSTidy dans sa version php, compresseur et optimiseur de CSS
  • une petite classe de mise en cache, déniché je ne sais plus où
  • et des petites astuces perso.


Donc je le précise, je me suis juste contenté d'assembler les sources pour faciliter l'implémentation ! Et n'etant pas très à l'aise en php, il y a très certainement de meilleurs façon "d'assembler" tout ça ...

Source / Exemple :


<?php
     //array of .js files
     $my_files = array('/js/swfobject.js','/js/prototype.js','/js/scriptaculous.js','/js/popup.js');
     //@param [array of files, cache folder, time to cache (sec), compress?]
     $my_param =  array($my_files,'../cache/',60*60*12,true);
     //include the php file for processing
     require( '../optimizer/ultimate_optimizer.php' );
?>

Conclusion :


1. uploadez les classes sur votre serveur (dans cette exemple je les met dans un dossier ?optimizer? situé à la racine)
2. créer un fichier php (nommé le par exemple ?import_js.php?) et mettez le code précédant à l'intérieur (avec vos fichiers .js)
3. uploader le fichier php sur votre serveur (moi je l?ai placé dans le même dossier que les .js)
4. remplacez vos imports multiples par l?import unique du fichier php
<script type="text/javascript" src="/js/import_js.php"></script>
5. Et pour finir, créer un fichier ?cache? situé à la racine.

Sujet d'origine: http://www.webinventif.fr/wiki/tutoriels/javascript/cjo_css_and_javascript_optimizer
Sujet en anglais (enfin si on veut ^^): http://www.webinventif.fr/wiki/tutoriels/javascript/cjo_css_and_javascript_optimizer

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
138
Date d'inscription
vendredi 1 août 2003
Statut
Membre
Dernière intervention
16 juillet 2009

Salut,

Désolé de répondre si tardivement,j'ai résolu le probleme et oublié ce post.

Je parlais du temps pour récupérer le fichier présent dans le cache, d'ou le probleme !

Les tests que j'effectuais étaient réalisés a l'aide d'un xamp sous windows .. apres reboot du serveur, les temps se sont calmés. Donc le serv devait etre en train de péter un pti plomb :) Depuis ca lui est arrivé deux trois fois à mon xamp de me jouer des tours de ce genre, mais un reboot du pc (et donc du serveur) regle le probleme.

Merci a toi, c'est très utile et il est plus performant que le mien :)

Bonne continuation.
Messages postés
63
Date d'inscription
mercredi 25 août 2004
Statut
Membre
Dernière intervention
19 février 2008

Tu parle du temps pour executer la compression + mise en cache ou du temps pour recuperer le fichier déjà present en cache (car tout l'interet est là) ?

Moi j'ai des temps "normaux" ...
Messages postés
138
Date d'inscription
vendredi 1 août 2003
Statut
Membre
Dernière intervention
16 juillet 2009

Salut,

J'ai testé ton code car il m'avait l'air plus poussé que celui que j'utilise actuellement.

Je suis extrêmement surpris du résultat : les temps d'executions des scripts compressés par ton code sont hallucinants : 600ms en local pour parser un code js de 40ko ... (63ms non compressé ...). Je ne parle pas du temps de compression (plus de 4secondes ...) mais bien du temps de chargement du fichier en provenance du cache !

Je n'arrive pas a comprendre d'ou vient le problème ...

Même les css sont extrêmement longs ! 80ms pour un css de 3ko !

D'autres personnes rencontrent les mêmes problèmes ?
Messages postés
63
Date d'inscription
mercredi 25 août 2004
Statut
Membre
Dernière intervention
19 février 2008

@zeguizmo

Oui voilà, c'est a grande echelle que ça prend son importance ! ça limite les accès aux fichiers externes.

Et ce n'est pas compromis par le temps de compression php, car php ne le compresse qu'une fois toute les 12 heures dans l'exemple, et tu peux carrement mettre une fois tout les 10 jours, donc après ça reste juste un accès à un fichier texte (non dynamique) unique, gain de poids, gain de temps et on epargne le serveur en evitant les accès multiple ;)
Messages postés
138
Date d'inscription
vendredi 1 août 2003
Statut
Membre
Dernière intervention
16 juillet 2009

Juste une petite remaque pour ceux qui n'auraient pas bien compris : la différence ne se fait pas sur un client mais sur des milliers, des dizaines de milliers voire meme des centaines de milliers selon l'importance du site.

Dans ce cas, être passé de 80ko à 20ko pour un pauvre fichier js représente un gain de bande passante énorme.

Reste a savoir si le gain de bande passante n'est pas compromis par le temps (et l'intensité) d'utilisation du proc pour compresser tout ca via php. Tout dépend des priorités ... la vitesse d'execution coté client ou coté serveur. Des benchs sont à faire, fort à parier qu'ils dépendront énormément de vos configs respectives. Il est évident que dans certains cas cette méthode sera très efficace.

J'espère en avoir eclairé quelques uns ...

Bonne soirée.
Afficher les 27 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.