JeuWeb - Crée ton jeu par navigateur
CSS et JS : minify, loader, obfuscation - qu'utilisez-vous? - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : CSS et JS : minify, loader, obfuscation - qu'utilisez-vous? (/showthread.php?tid=5244)

Pages : 1 2 3


RE: CSS et JS : minify, loader, obfuscation - qu'utilisez-vous? - php_addict - 23-02-2011

j'ai mis ceci:


ob_start ("ob_gzhandler");
header ("content-type: text/css; charset: UTF-8");
header('Cache-Control: max-age=86400, must-revalidate');

mais je ne sais pas du tout comment connaitre la taille des données transférées


RE: CSS et JS : minify, loader, obfuscation - qu'utilisez-vous? - niahoo - 23-02-2011

si t'es sous unix tu fais avec wget par exemple... sur windows y a une commande similaire je pense,
sinon, firebug doit te dire la taille je suppose.


RE: CSS et JS : minify, loader, obfuscation - qu'utilisez-vous? - php_addict - 23-02-2011

effectivement avec firebug...

donc en gros:

css:

taille des fichiers (devellopement) --> 145 Ko (148 531 octets)
taille du fichier cache (production) --> 128 Ko (132 005 octets)
taille envoi http du cache (zippé ob_gzhandler) --> 10 Ko (11 105 octets)

Nb de fichier css: 8 (devellopement)
Nb de fichier cache: 1 (production) (donc 1 seule requete HTTP sachant que tout les fichier .css ne sont pas necessaire pour une meme vue)

JS:

taille des fichiers (devellopement) --> 299 Ko (306 612 octets)
taille du fichier cache (production) --> 170 Ko (174 405 octets)
taille envoi http du cache (zippé ob_gzhandler) --> 46 Ko (47 420 octets)

Nb de fichier js: 14 (devellopement)
Nb de fichier cache: 1 (production) (donc 1 seule requete HTTP sachant que tout les fichier .js ne sont pas necessaire pour une meme vue)


Note:
- la compression du cache CSS parait excellente en raison des nombreuses occurrences de mêmes chaines de caractères
- les js ne sont minifiés que pour les commentaires, retour à la ligne, mais pas d'obfuscation ou autre technique de minification car minifier des script en JQUERY ne semble pas une tres bonne idee

de plus comme ce sont des fichiers générés en php:

<link rel="stylesheet" type="text/css" href="style.css.php" />
<script type="text/javascript" src="js/all.js.php"></script>

cela permet d'envoyer dans le header une date d'expiration du cache navigateur ainsi qu'une methode de compression pour l'envois HTTP

Seul bémol, chrome me signale qu'un faible pourcentage du code css est utilisé pour une meme vue, normal car le cache css regroupe tout les fichiers .css , mais on s'en fout non ?

si vous voulez mettre en place ce systeme il faut juste faire gaffe à un truc pour la generation du fichier cache des .JS :

il faut bien mettre les fichier de configuration et les librairies (Jquery) en premier lieu et ne pas oublié de rajouter des retour à la ligne apres chaque fichiers .js inclus dans le fichier cache...

voili voilou...


RE: CSS et JS : minify, loader, obfuscation - qu'utilisez-vous? - Sephi-Chan - 23-02-2011

Merci pour ce retour, PHP Addict ! Smile

(23-02-2011, 11:11 AM)niahoo a écrit : si t'es sous unix tu fais avec wget par exemple... sur windows y a une commande similaire je pense,
sinon, firebug doit te dire la taille je suppose.

Justement, j'ai bien l'impression que wget indique la taille du fichier décompressé :

Citation :romaintribes ~ 13:45 % wget ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
--2011-02-23 13:46:02-- http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
Resolving ajax.googleapis.com... 209.85.148.95
Connecting to ajax.googleapis.com|209.85.148.95|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: unspecified [text/javascript]
Saving to: `jquery.min.js'

[ <=> ] 84,362 260K/s in 0.3s

2011-02-23 13:46:02 (260 KB/s) - `jquery.min.js' saved [84362]

Aucun doute que les API Google servent du contenu compressé, or jQuery 1.5 est indiqué comme pesant 29 KB.

Du coup, je ne sais pas où trouver cette information.


Sephi-Chan


RE: CSS et JS : minify, loader, obfuscation - qu'utilisez-vous? - php_addict - 23-02-2011

(23-02-2011, 02:29 PM)Sephi-Chan a écrit : Du coup, je ne sais pas où trouver cette information.

firebug de firefox, onglet réseau ?


RE: CSS et JS : minify, loader, obfuscation - qu'utilisez-vous? - Sephi-Chan - 23-02-2011

Effectivement… Moi qui d'habitude préfère les outils de développeurs de Webkit, je dois reconnaître que pour une fois, c'est Firebug qui l'emporte. ^^


Sephi-Chan


RE: CSS et JS : minify, loader, obfuscation - qu'utilisez-vous? - niahoo - 23-02-2011

Essaie :
wget -S --header="Accept-Encoding: gzip,deflate" ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

Chez moi ça ne fonctionne pas, google ne renvoie pas de contenu compressé..


RE: CSS et JS : minify, loader, obfuscation - qu'utilisez-vous? - Sephi-Chan - 23-02-2011

Google est bien capable de servir en Gzip. Sur Tarschool, Anthor charge bien jQuery depuis les API Google et le fichier arrive bien Gzip (moins de 19 KB pour jQuery 1.3.1).

Effectivement, il faut demander le contenu compressé… Il doit y avoir une astuce pour le récupérer ainsi avec wget. Wink


Sephi-Chan


RE: CSS et JS : minify, loader, obfuscation - qu'utilisez-vous? - niahoo - 23-02-2011

Je me doute que google en est capable Smile

Je te demandais justement de tester car ma commande (avec l'astuce que tu évoques) est censée sauvegarder un fichier gzip, or elle ne le fait pas !


RE: CSS et JS : minify, loader, obfuscation - qu'utilisez-vous? - Sephi-Chan - 23-02-2011

Elle ne le fait pas non plus de mon côté. ^^