web-dev-qa-db-fra.com

Comment minifier JS ou CSS à la volée

Comment minimiser JS et CSS à la volée/runtime, afin que je puisse conserver la structure de code d'origine sur mes serveurs si elle est minifiée au runtime/fly.

phpjavascriptcssoptimizationminify
39
gourav

Après de nombreuses recherches et optimisations de sites, je vous recommande vivement d'utiliser ce script pour les fichiers CSS:

<style>
<?php
     $cssFiles = array(
      "style.css",
      "style2.css"
    );

    $buffer = "";
    foreach ($cssFiles as $cssFile) {
      $buffer .= file_get_contents($cssFile);
    }
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    $buffer = str_replace(': ', ':', $buffer);
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    echo($buffer);
?>
</style>

Il compresse tous les fichiers css en un et le passe au format HTML, ce qui réduit à zéro le nombre de demandes supplémentaires. Vous pouvez également créer votre propre fichier compressé.css si vous préférez le faire, plutôt que de coller des styles en HTML.

18
Krzysiu Jarzyna

Je pense que votre question devrait en réalité être la suivante: comment puis-je mettre à jour mes serveurs live de manière fiable et répétée? Ce dont vous avez besoin est un script de déploiement automatique. Personnellement je préfère Tissu , mais d'autres outils sont disponibles.

Un script de déploiement automatique vous permettra d'exécuter une commande unique qui ira sur des serveurs actifs, mettra à jour le code source, exécutera toutes les étapes de déploiement (telles que la réduction du javascript) et redémarrera le serveur Web.

Vous ne voulez vraiment pas minimiser les fichiers javascript ou css à la volée, vous devriez le faire une fois lors du déploiement et ensuite avoir une variable dans votre code qui spécifie s'il s'agit d'un déploiement en direct ou non. Si la variable est true, vos liens vers les fichiers doivent être des liens vers la version réduite, et si elle est false, ils doivent correspondre aux versions normales.

Il existe un certain nombre de programmes qui effectuent la minimisation, dont l'un n'a pas encore été mentionné est JSMin .

10
Andrew Wilkinson

Si votre objectif est de rendre votre JavaScript légèrement moins lisible, et ce au moment de l'exécution, vous pouvez le garder très, très, très simple. Avec seulement trois lignes de code, vous pouvez obtenir un minimum de minification totale en quelques millisecondes.

// make it into one long line
$code = str_replace(array("\n","\r"),'',$code);
// replace all multiple spaces by one space
$code = preg_replace('!\s+!',' ',$code);
// replace some unneeded spaces, modify as needed
$code = str_replace(array(' {',' }','{ ','; '),array('{','}','{',';'),$code);

Cela ne fait aucune vérification de syntaxe. Le code peut devenir invalide après avoir utilisé ceci. Vérifiez la fin des lignes dans votre JS, est un ';' manquant quelque part?

5
KIKO Software

Boilerplate HTML5 est livré avec un script de construction pratique qui compresse JS, CSS, des images et bien plus encore. Vérifiez-le!

Comme expliqué dans les autres réponses, une "véritable" minification à la volée (compresser dynamiquement un fichier à chaque fois qu’il le demande) ne serait pas une très bonne idée.

4
Mathias Bynens

Si je peux parler si librement;

Réduire un fichier JS/CSS aurait pour objectif d’analyser plus rapidement (et d’utiliser moins d’espace disque). En le minifiant au moment de l'exécution, cet avantage serait complètement perdu.

Je me trompe peut-être dans votre objectif final, mais c’est ce qui me vient à l’esprit au début.

Modifier: post par @Ant clarifié pour moi.

3
Steven Ryssaert

Si vous avez le contrôle total de votre configuration Apache/Ngnix, une bonne option (en général) serait d’activer le module PageSpeed ​​ , dans votre cas avec 

2
stefano di luca

Assetic est un projet de Nice qui aide à organiser des ressources telles que CSS et Javascript, y compris la minification. Voir ici pour une introduction.

En règle générale, la minification à l'exécution doit toujours être combinée à une mise en cache solide côté serveur et à l'utilisation de caches client et proxy le long du chemin menant au navigateur. 

2
Stefan Gehrig

Vous devez system(); this

$ Java -jar yuicompressor-x.y.z.jar

http://developer.yahoo.com/yui/compressor/

1
dynamic

C’est exactement ce que WebUtilities (for J2EE) fait. Voici le lien.

http://code.google.com/p/webutilities/

Il effectue la minification et la fusion à la volée. Il dispose également d'une mise en cache pour éviter de réexécuter la minification ou le retraitement d'une ressource si la ressource n'est pas modifiée. Cela aide également avec les optimisations suivantes.

  • Servir plusieurs fichiers JS ou CSS en une seule demande
  • Ajouter un en-tête Expires pour les fichiers JS, CSS et Image à mettre en cache par le navigateur
  • Minify JS, fichiers CSS à la volée
  • Réduire les blocs de code CSS et JS en ligne
  • Ajouter le codage de caractères à votre réponse
  • Contenu compressé du serveur (gzip/compress/deflate)
  • Cache les réponses pour accélérer le chargement en évitant le retraitement

S'il vous plaît jeter un oeil au cas où vous le trouverez intéressant. 

0
Rajendra