kras a écrit :



Spéciale dédicasse aux Wordpressiens, continuez à mettre une dizaine de CSS

et de JS dans le

On vous

aime les gars ! Même le HTTP/3 ne pourra rien pour vous.





Je n’utilise pas wordpress mais … il y a un inconvénient à séparer ces CSS et JS en plusieurs fichiers ?

(une dizaine semble trop selon toi)

seb2411 a écrit :



Pour le dev c’est beaucoup mieux d’avoir des fichiers bien séparés. Ça permet d’avoir une organisation claire et de faciliter le debug.

 

Pour la prod il faut toutefois prévoir de les fusionner en un seul fichier et minifier le code. Sinon tu augmentes le temps de téléchargement (fichier plus gros) et pour chaque fichier ton navigateur va faire une requête : demande du fichier…attente de la réponse du serveur…téléchargement du fichier…



Pour te faire une idée, si tu utilises Firefox tu vas sur un site tu fais ctrl + shit + i et tu vas dans l’onglet “network” Tu recharge la page et il va te montrer tout les fichier télécharger et le temps de chargement. Si tu regardes le Timing pour chaque fichier tu as souvent par exemple un temps d’attente ou le navigateur attente la réponse du serveur. C’est souvent court mais si tu multiplies par 20 fichiers ça peu facilement représenter plusieurs secondes.





Je préfère Firebug, l’onglet network du module de debug par defaut de FF n’est ni pratique ni ergonomique.

Mais donc, c’est “juste” le temps de chargement des fichiers qui fait tiquer ? parce qu’au final, ca ne change pas grand chose d’avoir un js de 1000 lignes ou 10 js de 100 lignes, la différence se compte en millisecondes.

Et une fois les fichiers chargés en cache, il n’y a plus d’appels donc cet “inconvénient” de devoir attendre 3 ms ne se produit que lors du premier chargement.



Plutôt bénin comme problème selon moi.

Et très largement compensé par la praticité d’un code modulaire dont on ne charge que les éléments utiles.

En gros, il faudrait qu’à la publication, le generateur aille lire tous les js des modules actifs et recopie leur contenu dans un seul js à mettre en prod (les noms de fonctions sont préfixés du nom de module donc pas de conflit à l’horizon)

jun a écrit :



Dans ce scénario faudrait mettre le fichier obtenu en cache pour que ce soit “rentable” en terme de performance.



Le cas général aujourd’hui, c’est de “compiler” ton lot de module en un seul JS. Certaines IDE comme webstorm, ou certaines appli comme Codekit https://incident57.com/codekit/ mac only) ou Prerpos https://prepros.io/ win/mac/lin)  le font automatiquement dès qu’un fichier du lot est sauvegardé. 



Certains outils génère même un JS different pour chaque pages, selon les modules employé, mais demande

  quelques pré-requis : browserify.org .





Ca revient à copier les contenus des fichiers dans un seul fichier, non ? Éventuellement, virer les sauts de lignes, les espaces inutiles ce genre de truc ?







seb2411 a écrit :



Oui, normalement pour les framework modernes (genre Symfony en php) ca se gère automatiquement.  Pour Wordpress je pense qu’il doit y avoir des plugins mais c’est dommage qu’il gèrent pas ça nativement et proprement.





Ben, je tripatouille mon propre CMS depuis assez longtemps et justement la semaine dernière je me suis relancé dans un système où l’utilisateur peut créer son propre module d’affichage de contenu et l’inclure au site. Dans cette optique, il m’a semblé naturel d’avoir le js et le css spécifiques au module dans un dossier à part, et de charger toutes les ressources utiles en fonction du contenu de la page demandée (une page qui utilise les modules 1 et 3 ne chargera pas le js qui fait tourner le module 2)

Ca ne coute pas beaucoup plus cher de remplacer la recherche des ressources utiles par une copie de tous les js en un seul et de charger ce (gros) fichier tout le temps pour tout le monde.

Reste à voir les perfs.



Après tout, ce genre de projet est plus fait pour bidouiller que pour répondre à un réel besoin. Si je peux produire du code utile, cool, je distribue. Mais sinon c’est plus pour m’auto-former et garder la main.

seb2411 a écrit :



Je pense que tu dois pouvoir utiliser des lib déjà existantes pour faire ça. Sauf évidement si tu veux faire ça toi même.





Bien sur, le but est d’avoir un outil dont j’ai codé chaque ligne, sinon je prendrais un CMS existant :)

Et c’est aussi d’avoir un truc perso à bidouiller pour tester ce qui me passe par la tête.







seb2411 a écrit :



Pour minifier c’est pas seulement virer les commentaires et les espaces inutiles mais aussi compresser le code (un exemple avec jquery :http://code.jquery.com/jquery-1.11.2.min.js).









jun a écrit :



Ca va un peu plus loin.

 …





OK. Je verrais pour des méthodes de minification. J’ai l’impression que, comme souvent, on peut faire 80% du boulot avec 20% d’effort. C’est ma devise ^_^’







jun a écrit :



Dans le cas de browserify, c’est un peu différent, il ne fait pas que concatener des fichiers, mais grâce à des outils de gestion des dépendances comme requireJS ou CommonJS, il ne concatene que les modules et dépendances utiles. C’est très pertinent aujourd’hui ou l’on peut partager du code client et du code server (avec NodeJS) par exemple.





Du coup, il créé un fichier js par combinaison de modules utilisés ? Genre la page X utilise module 1 et 3, il créé un fichier “module-1-3.js”, le remplit avec le code fournit par les modules 1 & 3 et le charge pour toutes les pages qui ont cette combinaison de module ?

C’est une bonne solution si l’on a pas beaucoup de modules et donc peu de combinaisons. Si au bout d’un moment, il n’y a jamais 2 pages qui utilisent les mêmes combinaisons de modules, ca devient moins intéressant (s’il n’y a pas de réutilisation possible du code, inutile de faire des choses qui factorisent le code).

jun a écrit :



Question d’outil =)



Y’a des gens qui préfère des outils comme prepros car c’est simple à mettre en oeuvre.

D’autre préfère des outils comme gulp, plus proche d’un maven dans l’esprit, mais qui demande un sérieux apprentissage, mais indépendant de tout IDE.





Oui mais non. Je n’ai aucun objectif à atteindre hormis apprendre. Donc aucun outil, je veux avoir tapoté chaque ligne de code avec mes petits doigts à moi.







jun a écrit :



T’as compris le truc, c’est bien la réutilisation le truc.



Aujourd’hui NodeJS (JS côté serveur) est une techno qui monte : paypal a lâché java pour NodeJS, résultat +20% de perf sur le même hardware, -30% de temps de dev. La BBC vient d’y passer aussi :&#160http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d



Dans ce contexte, il est pas rare de vouloir mutualisé du code côté client et serveur. Mais là ou un module de logging, pour l’exemple,  est pertinent côté serveur, il ne l’est pas côté client. Une solution comme browserify permet de générer des fichier réellement utile. 



Le seul truc ou je rejoint pas browserify, c’est le côté “une page = un fichier”,  qui ne permet pas de jouer sur le cache navigateur de manière optimal…





Voir au dessus, s’il suffit de lire un fichier pour en copier le contenu, je n’ai pas besoin d’une librairie externe, je peux le faire moi-même. Avec moins de vérification, moins d’optimisation, en 1 ligne bien bourrine. Je ne cherche pas à concurrencer des solutions pro donc les perfs m’importent peu, c’est surtout avoir l’occasion de réfléchir à tout ça par moi-même.

Le seul truc externe que j’utilise, c’est la librairie jquery.