Devrais-je combiner des fichiers js / css en un seul fichier?
Les modules complémentaires YSlow et de Google Page Speed recommandent de combiner des fichiers de script (et de style) dans un fichier unique afin de réduire le nombre de demandes HTTP. Il en va de même lorsque les fichiers de script sont cohérents sur l’ensemble du site, mais pour une application Web ayant des exigences différentes sur le site.
La façon dont je le vois il y a quelques options:
Combinez tous les fichiers utilisés sur le site, et chaque page obtiendra le même fichier combiné. L'inconvénient est le contenu inutilisé encombrant le script (et un premier chargement plus lourd (également à recharger chaque fois qu'un script de composant change)).
Combinez les fichiers par page. L'inconvénient est que chaque page ayant des exigences différentes obtient un fichier combiné différent (premier chargement plus lourd pour chaque type de page).
Ignorez l'interprétation stricte "un fichier seulement" des recommandations et laissez la page chargée dans plusieurs fichiers, le cas échéant, avec une mise en cache qui annulera le nombre de requêtes HTTP dans le cas général - l'inconvénient est le nombre de requêtes HTTP sur chaque page.
Pensées?
L'option 2 est la pire. cela signifie que chaque page avec une combinaison différente de scripts JS nécessaires donnera lieu à une requête HTTP. Cela va aggraver les performances beaucoup.
L'option 1 est la meilleure. Finalement, la plupart des utilisateurs visiteront la plupart des types de pages de votre site Web. Il est donc toujours avantageux de tout combiner en un seul fichier, à l'exception peut-être des fichiers JS volumineux, nécessaires dans quelques pages rarement visitées.
La première page consultée est peut-être plus lente que celle de fichiers différents, mais cela vaut la peine, car chaque autre page utilisée utilisera le JS global mis en cache.
Un conseil cependant; fusionnez-les automatiquement si vous ne l'êtes pas déjà!
Je combine généralement le "Javascript global" - jQuery et les plugins courants - dans un seul fichier, puis je sers des plugins supplémentaires sous forme de fichiers séparés si nécessaire.
Par exemple, un site sur lequel je lance beaucoup de pages contient des tables de données, donc j’ai un global.js avec jQuery, DataTables et SuperFish (pour mon menu). Il y a deux pages sur le site qui utilisent une "lightbox" donc j'ai un script séparé pour ces deux pages.
Pour CSS, je ne sers qu'un seul fichier pour l'ensemble du site et j'essaie de rendre le CSS aussi général que possible - la plupart des pages ne contiennent que quelques éléments CSS uniques.
Je ne suggérerais pas de les combiner tous. Si vous utilisez une bibliothèque commune, vous pouvez utiliser un CDN pour livrer vos javascripts. Vous pouvez ensuite tirer parti de la mise en cache du navigateur (en supposant que d'autres sites utilisent le même CDN) et de la diffusion distribuée. Microsoft et Google ont chacun une solution (je n'ai pas utilisé honnêtement non plus, mais je vais certainement commencer) et il peut y en avoir d'autres. Sur une note connexe, SO a cette question:
Quand le navigateur efface-t-il automatiquement le cache JavaScript?
et la première réponse est en or massif.
Bien qu'il soit définitivement recommandé d'utiliser aussi peu de fichiers que possible, vous constaterez peut-être que vous avez une séparation entre les fonctionnalités requises lors du chargement de la page et les fonctionnalités pouvant être différées par le biais du chargement asynchrone.
Si une quantité suffisante de votre JS peut être insérée dans la deuxième catégorie, vous pouvez améliorer la vitesse de chargement initiale de la page, ce qui crée une meilleure expérience pour vos utilisateurs.