Astuces de Webmaster

Installation de Minify, l’outil qui compresse et rassemble vos javascript

par Rom's le 09 déc 2008 (Développement Web)

On en a tous rêvé en secret, on l’avait à peu près découvert en regardant les sources Javascript de Google Maps, il faut maintenant se rendre à l’évidence, on ne peut pas se passer de Minify, un projet déposé sur Google Code.

Vous qui rêviez de rassembler tous vos scripts JQuery en un seul fichier..

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

L’idée ? transformer ça :

<script type= »text/javascript » src= »/_lib/_action/montre2.js »></script>
<script type= »text/javascript » src= »/javascript/prototype.js »></script>
<script type= »text/javascript » src= »/javascript/scriptaculous.js »></script>
<script type= »text/javascript » src= »/javascript/jscalendar/calendar.js »></script>
<script type= »text/javascript » src= »/javascript/jscalendar/lang/calendar-fr.js »></script>

<script type= »text/javascript » src= »/javascript/jscalendar/calendar-setup.js »></script>
<script type= »text/javascript » src= »/javascript/jquery-1.2.3.js »></script>
<script type= »text/javascript » src= »/javascript/jquery.form.js »></script>
<script type= »text/javascript » src= »/javascript/ficheProduit.js »></script>
<script type= »text/javascript » src= »/javascript/resa.js »></script>

en ça :

<script type= »text/javascript » src= »/min/?f=javascript/jquery-1.2.6.min.js,javascript/jquery.scrollTo.js,javascript/player/carousel_behavior.js,javascript/jquery.hoverIntent.min.js,javascript/superfish.js,javascript/jquery.bgiframe.min.js,javascript/jquery.reflect.js,javascript/jquery.form.js »></script>

ce petit bout de code PHP rassemble tous les scripts en un seul, retire les espaces qui ne servent à rien, ce qui compresse un petit peu le tout et vous met ça à disposition.

L’idée c’est qu’au lieu d’une dizaine de requête, vous n’en avez plus qu’une, ce qui allège considérablement les échanges et les temps de téléchargement..

Il suffit d’ailleurs de voir leur exemple : 98KBytes au départ, 29KBytes à l’arrivée.. et moins de questions / réponses entre le navigateur et le serveur.

Et ça marche aussi avec les fichiers CSS ;)

Pour les perfectionnistes, on a là une bonne bible de tout ce qu’on peut faire pour optimiser le chargement des pages : http://developer.yahoo.com/performance/rules.html

Qu’attendez-vous ?

:, , , ,


» Flux RSS du blog

11 Commentaires pour cet article

  • gtraxx
    juin 25th, 2009 on 19:01

    Bonjour, je souhaiterai une explication pour mettre en place minify.
    Je pense avoir quelques questions sur la configuration qui est énigmatique pour l’instant.
    Un exemple simple serai vraiment sympa car je patauge :D

  • Rom's
    juin 25th, 2009 on 21:42

    l’exemple que j’y ai mis est réel, tu peux le voir dans la source du site http://www.doze.fr/

    il faut mettre le chemin de tes fichiers (dossier/monfichier.js) et il te les réduits.

    Commence par un seul fichier, ajoute en un deuxième, et rajoute fichier par fichier. Des fois, l’ordre compte, mais c’est un bug je présume..

    Il n’y a rien de plus à faire que ce que j’ai mis dans l’article. Tout est là.

  • Espinasse
    octobre 22nd, 2009 on 19:23

    Salut, j’ai un bug avec minify, je pense que ça viens de php, j’ai la version php4 et je vais passer à php5.
    Est-ce que le bug viens de là? Minify est-il fait pour php5 et supérieur?
    Merci pour la réponse.

  • Rom's
    octobre 22nd, 2009 on 22:03

    Bonjour,

    minify n’a rien à voir avec le PHP ou quoique ce soit dans ce genre, vous pouvez regarder le code source de ce site pour exemple : http://www.doze.fr

  • Espinasse
    octobre 23rd, 2009 on 8:50

    Désolé de te décevoir mais minify ne marche pas avec php4, il faut php5 pour pouvoir l’utiliser. J’en ai la preuve dans les faits.
    C’est un programme conçu en php, donc dsl mais si ça a quelque chose à voir avec php… Merci quand même d’avoir répondu même… ;-)

    J’aimerai savoir que faire sur le site en production une fois que tout est ok avec minify pour qu’il soit plus rapide et pour le dossier min pour que personne ne puisse y accéder?

  • Rom's
    octobre 23rd, 2009 on 10:19

    Ah pour l’exécution, c’est autre chose, mais ce n’est jamais que de la concaténation de javascript ;)

    PHP4.. c’est le moment de passer à PHP5 ;) en général, on passe moins de 20 minutes à adapter un site mal codé pour être compatible PHP5.

    Pour le reste, c’est au niveau de la config apache ou dans le htaccess que ça se paramètre mais bon aucun intérêt de cacher le contenu de ton JS qui se lira de toutes façons dans le fichier minifié ;)

  • Espinasse
    octobre 26th, 2009 on 16:55

    « c’est le moment de passer à PHP5 ;) en général, on passe moins de 20 minutes à adapter un site mal codé pour être compatible PHP5 : » ça c’est déjà fait.
    Lit bien les questions car toutes tes réponses sont à côté de la plaque. Aucune de tes réponses ne font avancer mon problème.
    Si quelqu’un d’autre lit ce forum, je souhaiterai savoir comment empêcher les utilisateurs de pouvoir être redirigé vers min/builder/. Merci pour vos réponses.

  • Espinasse
    octobre 27th, 2009 on 8:39

    c’est bon j’ai trouvé, je donne l’astuce à ce qui en auraient besoin, mettre dans le dossier /min/builder un .htaccess avec à l’intérieur :
    <Files *.php>
    Order Deny,Allow
    Deny from all
    </Files>

    Bye, bye

  • MJack
    janvier 9th, 2011 on 19:41

    dans le config.php de minify tu peux mettre :
    $min_enableBuilder = false;

  • Xavier
    juin 15th, 2011 on 13:18

    Bonjour,

    merci pour cet article. En regardant les sources de doze, je ne vois rien de minifé ni au niveau du js, ni dans les css. Y’a t’il eu un problème avec cet outil ? Je comptais le mettre en place, mais je me pose la question du coup.

    Xavier

  • Romain BOYER
    juin 15th, 2011 on 15:53

    Mon remplaçant a dû le retirer, pour des raisons obscures :-)
    ça se teste en tout cas ! http://code.google.com/p/minify/

Laisser un commentaire


7 - six =

Vous cherchiez ?

Recherche rapide :

Vous ne trouvez toujours pas ? Laissez un petit commentaire sur un article, qu'on puisse regarder ça de plus près !

Quelques amis !

A visiter...

Archives

Tous les articles, chronologiquement...