Bonjour,
C est quoi la bonne méthode pour charger (UNE seule fois) une css ou js uniquement si une noisette (qui en a besoin) est utilisée sur un site, est ce qu on peut appeler le pipeline insert_head depuis une noisette (et comment ?)
Merci bien
amicalement
triton
Je vois pas trop l’intérêt
mais au pire insert ton js et css dans la noisette, non?
sinon tu as le pipeline affichage_final mais amha le jeu n'en vaut pas
la chandelle.
sinon y a le pipeline
Le jeudi 20 avril 2017 à 11:32 +0200, triton a écrit :
Bonjour,
C est quoi la bonne méthode pour charger (UNE seule fois) une css ou js
uniquement si une noisette (qui en a besoin) est utilisée sur un site,
est ce qu on peut appeler le pipeline insert_head depuis une noisette
(et comment ?)Merci bien
amicalement
triton
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.netArchives : https://www.mail-archive.com/spip@rezo.net/maillist.html
Infos : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.spip.net/
Irc : de l'aide à toute heure : http://spip.net/irc
Le 20/04/2017 à 13:06, Pierre a écrit :
Je vois pas trop l’intérêt
mais au pire insert ton js et css dans la noisette, non?
Bonjour,
oui, c'est comme ça que je faisais jusqu’à présent,
mais, si une même noisette est insérée plusieurs fois sur une même page, elle va insérer à chaque fois son css et son js (sans parler du fait que le js et css seront insérés n importe ou et qu'ils ne seront pas minifiés...)
Je suis en train de bricoler un truc, je poste si ça marche...
amicalement
triton
Bonjour,
sans répondre à la question, je me permets de poser une question : la quantité de js et de css vaut elle réellement le coup d'être séparée du reste des éléments du site ? Car au final, il est souvent mieux d'un point de vue performance de ne charger que quelques fichiers un peu plus gros qu'une foule de petits. Du moins dans des cas similaires, j'en suis souvent arrivé à cette conclusion.
Sinon, pour n'insérer un élément qu'une seule fois en js même si la noisette est présente plusieurs fois, il suffit d'avoir un mécanisme qui au moment ou les éléments sont insérés va déclarer une variable globale par exemple ou insérer un élément dans la page avec un ID. Le script à chaque appel vérifie simplement si cette variable est définie ou si l'id existe, et dans ce cas ne fait rien. Dans le cas contraire, on insère les js et css ( avec un id ou on déclare une variable ).
Le problème avec un pipeline, c'est que si la css ou le js sont fusionnés et minifiés il risque d'y avoir un gag: dans un cas on aura un gros fichier qui contient les css de base et dans le second, on aura un fichier encore plus gros qui contiendra les css de base plus les éléments de la noisette, donc double peine coté cache et téléchargement de fichiers ... Je ne suis pas sur de mon coup, mais ça vaudrait le coup de vérifier que l'on est pas dans ce cas: ça entrainerait de la perte au lieu d'un gain.
Le 20/04/2017 à 14:44, Vincent a écrit :
Bonjour,
sans répondre à la question, je me permets de poser une question : la quantité de js et de css vaut elle réellement le coup d'être séparée du reste des éléments du site ? Car au final, il est souvent mieux d'un point de vue performance de ne charger que quelques fichiers un peu plus gros qu'une foule de petits. Du moins dans des cas similaires, j'en suis souvent arrivé à cette conclusion.
Sinon, pour n'insérer un élément qu'une seule fois en js même si la noisette est présente plusieurs fois, il suffit d'avoir un mécanisme qui au moment ou les éléments sont insérés va déclarer une variable globale par exemple ou insérer un élément dans la page avec un ID. Le script à chaque appel vérifie simplement si cette variable est définie ou si l'id existe, et dans ce cas ne fait rien. Dans le cas contraire, on insère les js et css ( avec un id ou on déclare une variable ).
Le problème avec un pipeline, c'est que si la css ou le js sont fusionnés et minifiés il risque d'y avoir un gag: dans un cas on aura un gros fichier qui contient les css de base et dans le second, on aura un fichier encore plus gros qui contiendra les css de base plus les éléments de la noisette, donc double peine coté cache et téléchargement de fichiers ... Je ne suis pas sur de mon coup, mais ça vaudrait le coup de vérifier que l'on est pas dans ce cas: ça entrainerait de la perte au lieu d'un gain.
_______________________________________________
Bonjour,
je comprends bien... le truc c est que j utilise le noizetier (massivement) et je ne peux pas savoir au préalable quelles noisettes vont etre insérée, en combien d exemplaire sur mon site... Il faut donc que ce soit mes noisettes qui appellent les css et js (sinon, faut que je charge tout sans savoir si cela va etre utilisé ou pas)
Appeler les css et js depuis la noisette, c est un peu moche (et un link en dehors du head est a priori non valide) et si une noisette est utilisée plusieurs fois sur une page (cas assez courant) elle va à chaque fois appeler le meme css et js...
Alors, je viens de bricoler cette petite boucle qui sauf erreur de ma part, permet de charger UNE seule fois et uniquement si la noisette est présente sur la page (ou sur la page defaut)
[(#REM)inclusion des css et js propres aux noisettes]
<BOUCLE_noisettes(NOISETTES){type IN #ENV{type},defaut}>
[(#NOISETTE|unique|oui)
[(#SET{noisettecss,#NOISETTE.css})]
[(#SET{noisettejs,#NOISETTE.js})]
[<link href="(#CHEMIN{noisettes/css/#GET{noisettecss}}|compacte)" rel="stylesheet" type="text/css"/>]
[<script src="(#CHEMIN{js/#GET{noisettejs}}|compacte)" type="text/javascript"></script>]
]
</BOUCLE_noisettes>
bien sur, cela implique de nommer ses css et js du nom exacte de la noisette et de respecter la structure de dossier...
Pour l instant, ça à l air de marcher comme attendu...
amicalement
triton
Bonjour,
je comprends bien... le truc c est que j utilise le noizetier (massivement) et je ne peux pas savoir au préalable quelles noisettes vont etre insérée, en combien d exemplaire sur mon site... Il faut donc que ce soit mes noisettes qui appellent les css et js (sinon, faut que je charge tout sans savoir si cela va etre utilisé ou pas)
Appeler les css et js depuis la noisette, c est un peu moche (et un link en dehors du head est a priori non valide) et si une noisette est utilisée plusieurs fois sur une page (cas assez courant) elle va à chaque fois appeler le meme css et js...
Alors, je viens de bricoler cette petite boucle qui sauf erreur de ma part, permet de charger UNE seule fois et uniquement si la noisette est présente sur la page (ou sur la page defaut)[(#REM)inclusion des css et js propres aux noisettes]
<BOUCLE_noisettes(NOISETTES){type IN #ENV{type},defaut}>
[(#NOISETTE|unique|oui)
[(#SET{noisettecss,#NOISETTE.css})]
[(#SET{noisettejs,#NOISETTE.js})]
[<link href="(#CHEMIN{noisettes/css/#GET{noisettecss}}|compacte)" rel="stylesheet" type="text/css"/>]
[<script src="(#CHEMIN{js/#GET{noisettejs}}|compacte)" type="text/javascript"></script>]
]
</BOUCLE_noisettes>bien sur, cela implique de nommer ses css et js du nom exacte de la noisette et de respecter la structure de dossier...
Pour l instant, ça à l air de marcher comme attendu...
N'utilisant/ ne connaissant pas le plugin en question, je vais vite me retrouver embêté pour continuer la conversation 
Ceci dit, vu ce qui est décrit, ça a l'air pas mail mais il serait bon quand même de voir la taille d'un fichier "global" qui inclue la mévanique js/css pour toutes les noisettes par rapport à ce que peuvent donner les différentes combos si elles sont fusionnées ensemble lors de la "minification".
Sinon, je confirme qu'un lien css hors entête est invalide, mais on peut créer en js un nouveau noeud dans le dom qui soit une css située dans le head sans problèmes. Par contre, si le js est désactivé, c'est la misère ... Donc la solution avec la boucle est de loin la plus propre de ce coté. Et en js il est comme je le disais possible de vérifier avant si les éléments ont déjà été crées ou non, comme ça, pas de duplicata. Cependant, ça reste un pis aller.