Pour ceux qui ont suivi mon précédent billet sur l’optimisation des javascripts, vous l’aurez compris : je suis sensibilisé à l’optimisation des sites web et notamment (entre autre) à la préconisation Yahoo! Developer Network : »Minify JavaScript and CSS« . Cette préconisation suggère de réduire les CSS et les javascript en nombre et en poids. Dans le meilleur des cas, il faudrait donc n’avoir qu’une feuille CSS et qu’un fichier Javascript de poids raisonable.

Pour la migration du planet Fedora-Fr sous eZ Publish, j’avais pour intention de développer une extension eZ Publish intégrant un minifier JS/CSS. J’étais parti pour utiliser JSMin qui, certes est moins puissant que YUI ou packer mais qui offre le double avantage d’être full php (YUI utilise JAVA) et surtout de ne pas trop altérer le source à grands coups d’eval (comme le fait packer).

Mais au final, j’ai fait le choix de ne pas utiliser le système de design d’eZ Publish et de continuer à stocker le design (CSS, images, JS) de chaque sous-domaine (www, planet, forums, doc, etc..) dans un sous domaine commun (common). Au final, que vous soyez sur le planet, l’accueil ou sur les forums de fedora-fr, vous ne téléchargerez qu’une fois les images et les feuilles de styles.

Bref, comme vous l’aurez compris, j’avais laissé tomber la chose… Puis en furetant dans le code source de la future version d’online editor : ezoe pour les intimes; je suis tombé sur la classe ezoepacker. À la lecture du templateautoload j’ai déduit qu’ezoe proposait 2 opérateurs de template forts sympatiques : ezoescript et ezoecss.

Pour faire court, ezoescript et ezoecss remplacent la syntaxe classique d’eZ, qui avait pour résultat de multiplier les CSS et les JS :

{section name=JavaScript loop=ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ) }
<script language="JavaScript" type="text/javascript" src={concat( 'javascript/',$:item )|ezdesign}></script>
{/section}

<style type="text/css">
{section var=css_file loop=ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' )}
    @import url({concat( 'stylesheets/',$css_file )|ezdesign});
{/section}
</style>

On notera au passage que contrairement à ce que préconise Yahoo, le JS est chargé avant le CSS…

Bref, tout ça est remplacé par :

{ezoescript(   ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ),
            true, 'text/javascript', 'javascript', 3 )}
{ezoecss(   ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' ),
            true, 'all', 'text/css', 'stylesheet', 3 )}

ezoecss

ezoecss va récupérer toutes les CSS pour n’en faire qu’une. Cette dernière sera stockée dans le cache et sera de la forme 1 ligne par feuille CSS.

ezoescript

Malheureusement ezoescript n’est pas un vrai minifier JS au sens strict du terme. En effet, point de code sur une seule ligne ni de renommage des variables et fonctions. ezoescript se contente de supprimer les sauts de ligne et les commentaires avant de stocker le fichier en cache. L’avantage c’est qu’il ne présente aucune contrainte de codage pour fonctionner (jusqu’au niveau 2 du moins). J’ai cependant émis sur les forums la suggestion de le coupler à un vrai minifier et André R. ne semble pas fermé à ce genre d’idée…

Déçu de ne pas pouvoir faire joujou avec ces 2 opérateurs sur fedora-fr, je les ai utilisé sur un projet professionnel sur lequel j’avais une problématique forte d’optimisation. Je doit avouer être satisfait du résultat.

Remarque : Si vous utilisez les réécriture d’url, attention à rajouter les lignes qui vont bien dans votre virtualhost.