Bonne pratique d'utilisation des fichiers JS

barbuslex
Javascript

Bonjour,

J'ai une question un peu métaphysique à vous poser...

Lorsqu'on a plusieurs pages dans notre application avec plusieurs formulaires etc... vaut-il mieux mettre toutes les règles JS/jQuery dans un même fichier app.js pour toute l'application ou vaut-il mieux séparer chaque règle en fonction des formulaires / pages que nous avons dans notre application.

Dans le 1er cas :

  • 1 seul gros fichier app.js pour toute l'application

Dans le 2nd cas :

  • 1 petit fichier common.js pour les règles communes
  • 1 fichier .js par page et/ou formulaire : Exemple : Page 1 => page1.js, Page 2 = page2.js

Concernant le css, on a tendance à mettre tout dans le même fichier app.css.
Mais concernant les fichiers .js je me pose tout le temps la question... :S

Avez-vous un retour d'expérience à ce sujet ?

Merci à tous,

++

4 réponses

intelligid

Pour une question d'organisation, je préfère séparer les différents composants afin d'avoir un projet clair. Mais pour la prod, je compacte le tout avec Webpack.

Benjamin Derepas

Comme l'a dit intelligid , il m'arrive souvent d'avoir plusieurs fichiers js :

  • librairies (jquery, angular etc)
  • plugins

  • mes propres scripts

    Par contre je ne créer par un script par page, ou un script pour chaque formulaire .
    En tout logique tu utilise en javascript des ID dans ton DOM, donc aucun risque qu'une page soit en conflit avec une autre variable etc .

Et coté otpimisation, une fois la phase de dev terminées, je minifie et compresse tout ça.
Regarde les tutos sur Gulp ou Grunt :)

Kenor

On va dire ça dépend, en ce qui me concerne, je met en général presque tout dans un fichier minifié (en prod donc).

Seul cas particulier, les éléments qui prennent vraiment beaucoup de place. En l'occurence, un éditeur WYSIWYG qui fait 90Ko, je ne vais pas le charger pour tout le monde alors qu'il ne servira qu'à ceux qui souhaite participer aux sites. Je réserve donc ce fichier aux pages affichant ce WYSIWYG.

Maintenant si tu utilises beaucoup de plugin jQuery tout fait par exemple, qui font souvent un sacré poids, il serait préférable de séparer les fichiers. J'ai récemment donner un coup de main à un ami, ses devs ne savent pas réellement faire du JS, ils savent juste utiliser ce qui existe. De fait, le fichier final de JS fait ... 2Mo ! Evidemment, là il faut prévoir quelque choe (prendre un vrai dev :D ).

galyb

Je pense qu'il y a confusion sur le pourquoi du comment. Déjà avant on séparait tout le fichier js il y a quelque année, sauf qu'on est arrivé a un problème qui est qu’un navigateur avec du http ne peut charger que 6 fichiers simultanément venant d’un même domaine. (image, css, js, etc.) Donc on a trouvé des parades pour cela, les sprites image, les js assembler et css. Maintenant il est de bonne pratique, mais pas obligatoire de faire deux fichier js, un qui regroupe tous tes fichiers js sans les minifier que tu utilises en local ou sur un serveur de dev, qui sera lisible en cas de bug. Et un autre qui est le même fichier minifier pour la prod. Après il y a des scripts qui peuvent être unique a une page, a se moment là autant les charger que sur cette page et ne pas le mettre dans ton script principal.