Plusieurs fichiers sur CDN contre un fichier localement
Mon site Web utilise environ 10 bibliothèques javascript tierces comme jQuery, jQuery UI, prefixfree, quelques plugins jQuery et aussi mon propre code javascript. Actuellement, je tire les bibliothèques externes des CDN comme Google CDN et cloudflare. Je me demandais quelle était la meilleure approche:
- Extraire les bibliothèques externes des CDN (comme je le fais aujourd'hui).
- Combiner tous les fichiers en un seul js et un seul fichier css et les stocker localement.
Toutes les opinions sont les bienvenues tant qu'elles sont expliquées. Merci :)
La valeur d'un CDN réside dans la probabilité que l'utilisateur ait déjà visité un autre site appelant ce même fichier à partir de ce CDN, et devient de plus en plus précieuse en fonction de la taille du fichier. La probabilité que cela soit le cas augmente avec l'omniprésence du fichier demandé et la popularité du CDN.
Dans cet esprit, extraire un fichier relativement volumineux et populaire d'un CDN populaire est tout à fait logique. jQuery et, dans une moindre mesure, jQuery UI, correspondent à ce projet de loi.
Pendant ce temps, la concaténation de fichiers a du sens pour les fichiers plus petits qui ne changeront probablement pas beaucoup - vos plugins couramment utilisés conviendront à cette facture, mais votre code spécifique à l'application de base ne le sera probablement pas: il pourrait changer de semaine en semaine, et si vous '' en le concaténant avec tous vos autres fichiers, vous devrez obliger l'utilisateur à tout télécharger à nouveau.
Le passe-partout HTML5 fait un très bon travail en fournissant une solution générique pour cela:
- Modernizr est chargé à partir du local dans la tête: il est très petit et diffère beaucoup d'une instance à l'autre, donc cela n'a pas de sens de le source à partir d'un CDN et cela ne blessera pas trop l'utilisateur de le charger à partir de votre serveur. Il est mis dans la tête parce que CSS peut en faire usage, vous voulez donc que ses effets soient connus avant le rendu du corps. Tout le reste se trouve en bas, pour empêcher vos scripts plus lourds de bloquer le rendu pendant leur chargement et leur exécution.
- jQuery du CDN, car presque tout le monde l'utilise et c'est assez lourd. L'utilisateur aura probablement déjà ce cache avant de visiter votre site, auquel cas il le chargera instantanément du cache.
- Toutes vos petites dépendances tierces et extraits de code qui ne sont pas susceptibles de changer grand-chose sont concaténés en
plugins.jsfichier chargé depuis votre propre serveur. Cela sera mis en cache avec un en-tête d'expiration distant lors de la première visite de l'utilisateur et chargé à partir du cache lors des visites suivantes. - Votre code principal va dans
main.js, avec un en-tête d'expiration plus proche pour tenir compte du fait que la logique de votre application peut changer d'une semaine à l'autre ou d'un mois à l'autre. De cette façon, lorsque vous avez corrigé un bogue ou introduit de nouvelles fonctionnalités lorsque l'utilisateur visite dans quinze jours, cela peut être chargé à nouveau tandis que tout le contenu ci-dessus peut être importé du cache.
Pour vos autres bibliothèques principales, vous devriez les regarder individuellement et vous demander si elles doivent suivre l'exemple de jQuery, être chargées individuellement à partir de votre propre serveur ou être concaténées. Un exemple de la façon dont vous pourriez prendre ces décisions:
- Angular est incroyablement populaire et très grand. Obtenez-le du CDN.
- Twitter Bootstrap est à un niveau de popularité similaire, mais vous avez une sélection relativement mince de ses composants, et si l'utilisateur ne l'a pas déjà, cela ne vaut peut-être pas la peine de les obtenir Téléchargez la version complète. Cela dit, la façon dont il s'intègre dans le reste de votre code est assez intrinsèque, et il est peu probable que vous le changiez sans reconstruire l'ensemble du site - vous pouvez donc le garder hébergé localement mais garder ce sont des fichiers distincts de votre principal
plugins.js. De cette façon, vous pouvez toujours mettre à jour votreplugins.jsavec les extensions Bootstrap sans forcer l'utilisateur à télécharger la totalité du Bootstrap core.
Mais il n'y a aucun impératif - votre kilométrage peut varier.