CSS et JS : minify, loader, obfuscation - qu'utilisez-vous?

[php_addict]

bonjour

on a (presque) tous beaucoup de fichiers .css et .js

pour ma part faire plusieurs fichiers .css et plusieurs fichiers .js est pratique pour le devellopement

je compte garder ce système de fichier par contre je songe de plus en plus à un systeme qui ne générerais qu'un seul gros .css et un seul gros .js et qui en réduise la taille (bande passante) avec Obfuscation si possible (surtout pour JS)

j'en viens donc à vous pour vous demander si vous utiliser un tel système en php et si oui lequel ?

le top serait un script(librairie) qui vérifie les erreurs lors du regroupement des .css (par exemple styles concurrents ou doublons de class css)

bonne journée à tous et à toutes

[php_addict]

bonsoir

pour le côté css je me suis inspiré de ceci: http://www.catswhocode.com/blog/3-ways-t...-using-php

cela ne réduis que très peu la taille du fichier css mais cela fait nettement moins de requetes http...

question annexe: utilisez vous un outils pour verifier la syntaxe des .css (hormis w3c) ?

il me reste donc maintenant à minify mes fichier javascript...

[Sephi-Chan]

En cherchant un peu parmi les assets packagers pour PHP (je cherchais quelque chose d'équivalent à Jammit), je suis tombé sur Minify (user guide). Ça colle peut-être à ton besoin.

Pour le CSS, je ne l'écris pas à la main : je le génère avec SASS qui étend CSS avec plein de trucs : imbrication, variables, expressions, héritage. Du coup, si la compilation de SASS vers CSS fonctionne, je suis sûr que le contenu est parfait.

Je ne pense pas qu'il soit pertinent de chasser les styles concurrents : c'est au développeur d'utiliser la cascade à son avantage. Une fois qu'on comprend le fonctionnement, c'est une grande force.


Sephi-Chan

[Boule Hondevice]

YuiCompressor permet de compresser les javascripts et les css. Un coup de shell pour rassembler tes JS dans un seul fichier, tes css dans un autre seul fichier, un coup (enfin un pour les js et un pour la css) de YuiCompressor et le tour est joué.

[php_addict]

YuiCompressor permet de compresser les javascripts et les css. Un coup de shell pour rassembler tes JS dans un seul fichier, tes css dans un autre seul fichier, un coup (enfin un pour les js et un pour la css) de YuiCompressor et le tour est joué.

merci pour l'info...du coup je me suis fait mon propre système de mise en cache des tout mes .css et .js en utilisant js-min pour le js et une regex pour le css:

$content = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $content);		//remove comments

$content = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $content);	//remove tabs, spaces, newlines, etc.

mes .css sont rassemblés en un seul (cache) et idem pour mes fichiers .js

<link rel="stylesheet" type="text/css" href="style.css.php" />

<script type="text/javascript" src="js/all.js.php"></script>

style.css.php et all.js.php se chargent de créer le cache compressé de tout les fichiers ou de charger le cache si il existe...

cela diminue nettement le nombre de requêtes HTTP et sensiblement la taille du css et js

en ce qui concerne l'obfuscation du code JS je n'ai pas vraiment trouver de solution étant donné que mes scripts JS sont du JQUERY, même si l'obfuscation ne me parait pas vitale cela aurait été quand bien de pouvoir y parvenir...

[Amrac]

Tu gagne environ combien au niveau de la taille du css?

[php_addict]

css:

taille du cache --> 129 Ko
taille des fichiers --> 144 Ko

JS:

taille du cache --> 171 Ko
taille des fichiers --> 298 Ko

je gagne plus sur le cache JS, car il y a pas mal de commentaire dans le code source, pour ca ce système est assez pratique, cela permet de laisser les commentaires dans le code mais pas dans la version cache.

le gain n'est pas énorme pour les .css car cela regroupe tout les styles dont une petite partie seulement est utile pour une page html donnée

mais le but c'est quand même de réduire les requêtes HTTP

et cela me permet de ne pas avoir à determiner quel fichier .js ou quel .css doit être chargé pour telle ou telle vue...

par contre il ne faut pas oublier de vider le cache en cas de modif des .css et .css

[Ieyasu]

Tu peux aussi supprimer tes commentaires de ton environnement production et les laisser seulement en développement.

La réduction de tes fichiers sources par suppression des espaces, tabulations et autres caractères augmentant la lisibilité du code, et la suppression des commentaires, couplé à un système de cache performant et une compression des pages avant l'envoie au client permettent d'économiser une quantité non négligeable de bande passante.

Il n'y a qu'a regarder à quoi ressemble les fichiers Jquerry pour avoir un aperçu.

Même si ca peut faire "crade", il faut bien différencier les deux environnements qui n'ont pas les mêmes but ni contraintes.

[Holy]

Si je puis me permettre une remarque : en termes d'optimisation, ce qui fait vraiment gagner des octets sur la taille des fichiers, c'est surtout la compression Gzip.

Voici le détail de mon fichier master en javascript :
Normal : 170ko
Compression textuelle : 134 ko
Compression gzip : 42ko

Le gain est considérable au final puisque mon fichier transféré est quatre fois plus petit que mon fichier de développement.

[Sephi-Chan]

Que donne la version normale après un Gzip ?
Et que donne la version minifié (toujours après un Gzip) ?