Discussion :

[rodolphebrd]

Bonjour,

Je souhaiterais connaître la démarche pour rassembler mes fichiers Js (je crée un site statique).

J'ai vu qu'il suffisait de les coller bout à bout, qu'il existait des outils...

Merci de me permettre d'être sûr de la bonne pratique à adopter.

[SylvainPV]

Généralement on utilise des outils de build comme ant ou des builders plus personnalisés écrits en Java par exemple. La concaténation est une étape parmi d'autres dans les build process de projets web. Côté front on rajoute souvent comme étapes la minification du JS ou la compilation si on utilise des langages comme CoffeeScript ou des templates, des préprocesseurs CSS etc...

Si tu estimes qu'écrire ton propre builder est trop fastidieux, j'ai entendu du bien de GruntJS comme outil de build JS: http://gruntjs.com/

En fait avec les navigateurs d'aujourd'hui, concaténer les scripts est moins utile qu'avant. En effet à partir du moment où tu utilises une bonne librairie de chargement dynamique de scripts (je te conseille personnellement head.js), le navigateur charge les scripts en parallèle et donc plus rapidement en rapport taille/temps.

Néanmoins chaque requête asynchrone est encapsulée dans un paquet HTTP qui lui est propre, plus les couches inférieures (TCP/IP etc...). Donc il ne faut pas trop en abuser non plus et charger des scripts trop petits, au risque d'augmenter inutilement la taille totale des échanges. Réduire le nombre de requêtes est d'ailleurs conseillé pour le web mobile (peut-être à cause des headers propres à la 3G, à confirmer)

Donc au final je dirais qu'il faut trouver un bon compromis à la fois technique et pratique. Je conseille de ne plus utiliser de mécanisme de concaténation de scripts, mais de ne pas hésiter à les minifier et surtout utiliser une bonne librairie de chargement de scripts dynamiques. En parallèle que ce soit en prod ou en développement, essayez de faire des fichiers JS entre 100 et 1000 lignes de code ; bon compromis en taille/nombre de requêtes et en lisibilité.

[rodolphebrd]

Merci @SylvainPV,

Si j'ai bien compris votre réponse:

**Pas de concaténation.

1: minification
2: regroupement des scripts (head.js à l'air bien)
3: compression

Vous me confirmez que j'ai bien compris?

[SylvainPV]

Minification et compression c'est la même chose, ça consiste à utiliser un outil pour supprimer tous les caractères inutiles (commentaires, espaces, retours chariots) et renommer les variables pour occuper le moins d'espace possible et donc réduire la taille des requêtes. On s'en sert également à des fins d'obfuscation, pour rendre illisible le code source et empêcher sa réutilisation par autrui. Parmi les outils de compression existants on peut citer UglifyJS, Closure Compiler ou encore YUI Compressor.

Le build process est différent pour chaque projet ou presque, surtout qu'en général le front-end est minoritaire dans ce build process : il y a bien plus à faire côté serveur avec des déploiements, des initialisations en tout genre, des tests unitaires etc...

Si on s'en tient au Javascript, la best practice est de les minifier, d'activer la compression gzip sur le serveur, et d'utiliser une librairie comme head.js pour charger les scripts à la volée en parallèle.

[rodolphebrd]

C'est un peu technique et je ne suis pas très familier avec tout ça.

Minification et compression c'est la même chose

Concrètement minifier ou compresser sont 2 opérations conduisant à un résultat similaire!

Pour compresser je pensais utiliser Gzip...

On me conseille Codekit et/ou ant build.

Désolé pour la compréhension lente du sujet.

et merci pour vos réponses

[arnogues]

La minification consiste simplement à supprimer tout ce qui est inutile (; en trop, renommage des variables, etc...), yui compressor fait de la minification par defaut
La compression consiste à factoriser des endroitsr dans ton code, analyser le texte et transformer ça en soupe compressée. PackerJS Fait ça

[rodolphebrd]

Merci @arnogues

[SylvainPV]

Et gzip est un algo de compression utilisé par le serveur pour compresser à la volée tes fichiers. La compression gzip ne fait donc pas partie du build process, mais de la configuration serveur ; c'est un paramètre à activer.

[rodolphebrd]

@SylvainPV je le savais, mais maintenant tu viens d'enrichir mon vocabulaire, merci.

Que penser de Codekite et Gruntjs?