Comment gérer l'import des fichiers JS selon les pages HTML ?

Salut,

actuellement avec gulp par exemple, quand je build mon projet, je me retrouve avec un beau fichier js concaténé et minimisé.
C'est propre et le browser n'a besoin qu'une seule requête pour avoir le js du site.

Néanmoins imaginons que j'ai du code js que je souhaite afficher que pour une page HTML en particulier.
Parce que j'écoute certains events, j'initialise certaines choses en particulier, je créé une channel de socket via Pusher etc, et je ne veux le faire que sur cette page en particulier.
Bon avec des frameworks SPA comme VueJS, et sa politique de monofichier, tout est dans le même fichier (template, script et style), et ensuite le build se charge du reste, et ça se passe bien.

Mais pour un site plus "classique", comment faire à la mano ?
Car:
- garder plusieurs fichiers js pour la prod c'est moyen (on multiplie les requêtes)
- tout mettre dans la balise <script>, c'est toujours déconseillé car trop de couplage (même si défois je me demande si c'est si terrible que ça)

Comment faites vous de votre côté ?

Merci

nicolasca a écrit :
Néanmoins imaginons que j'ai du code js que je souhaite afficher que pour une page HTML en particulier.

Parce que je conçois/pense mes fichiers js et les utilise autant pour mes sites statiques que dynamiques - ce qui me facilite la maintenance pour tous mes sites - j'ai opté pour cette solution (que je n'ai pas encore systématisé pour tous mes scripts, seulement pour les libs volumineuses) : les scripts sont liés à une classe CSS, si la classe est détectée par mon fichier js maître (en l'occurence : 'Main.js'), alors appel du script dédié à cette classe via un get script (ici en jQuery car je n'ai pas encore convertit tout mes scripts en vanilla js) :

var scriptsUri = templateUri + '/Scripts/Vendors/Cycle.js';
$.getScript( scriptsUri, function() {  // Chargement via Ajax
	$( slideshow ).cycle(); // Initialisation du script
} );

Exemple concret pour un slideshow avec une classe... `.slideshow` :
- le script Github,
- l'application de ce script sur un exemple de page statique,
- l'application de ce script sur un exemple de page dynamique.
Modifié par Olivier C (01 Dec 2018 - 11:52)

nicolasca a écrit :

- garder plusieurs fichiers js pour la prod c'est moyen (on multiplie les requêtes)

Dis comme ça ça sonne comme si c'était un crime.

Perso, généralement c'est un .js pour tout le site.
À cela j'ajoute 0 à 3 fichiers js dédiés par page (librairie + script par exemple).

Si le projet devient plus important avec souvent de multiples js par page, les js dédiés peuvent aussi êtres concaténés, mais ça demande plus de travail/config, donc c'est relou la plupart du temps.

Dans les cas de très grosses applis, il y a le chargement dynamique via une solution telle que requireJs aussi.
Modifié par kustolovic (20 Sep 2017 - 18:03)

Du coup Olivier, le faire en ajoutant le fichier .js dans le template via une balise <script>, ou le faire comme toi via jQuery, est ce que ça change énormément ?

kustolovic, oui on dirait un crime lol
En tout cas, c'est perçu souvent de cette manière (perso je sais pas trop).
Oui requireJS est une possibilité. Mais je me dis pour des fichiers légers (petite appli), ça fait ch*** de mettre ça en place ^^

En tout cas merci pour vos réponses
Je vais continuer à regarder si je trouve une solution élégante.

Je n'ai pas vu de différence avec l'injection d'une balise script, la méthode presentée me semblait juste plus "in". Sinon je pense qu'il vaux mieux le faire en vanilla js.