Comment importer du JavaScript et du CSS depuis un CDN public ?
Lorsque vous écrivez une application JavaScript Vanilla, vous n êtes pas obligé d héberger tout le code que vous utilisez sur votre propre site. Les bibliothèques JavaScript les plus populaires sont d
📺 Calculateur taille écran idéal
Distance recommandée selon la taille et résolution. Pour 4K, on peut s'asseoir 2× plus près qu'en HD.
Questions courantes
Qu’est-ce qu’un CDN public ?
Un CDN public est un réseau de diffusion de contenu qui permet d’héberger et de distribuer des fichiers statiques tels que des images, des feuilles de style et des scripts JavaScript.
Comment importer du JavaScript et du CSS depuis un CDN public ?
Vous pouvez importer du JavaScript et du CSS depuis un CDN public en utilisant des liens directs vers les fichiers hébergés sur le CDN.
Quels sont les avantages de l’utilisation d’un CDN public ?
L’utilisation d’un CDN public peut améliorer la performance et la sécurité de votre site Web en réduisant la charge sur votre serveur et en fournissant une expérience utilisateur plus rapide.
Lorsque vous écrivez une application JavaScript Vanilla, vous n’êtes pas obligé d’héberger tout le code que vous utilisez sur votre propre site.
Les bibliothèques JavaScript les plus populaires sont disponibles à partir d’un réseau public de diffusion de contenu (CDN).
Cela peut simplifier le déploiement de l’application et la mise à jour des dépendances. En fait, si vous avez suivi un tutoriel JavaScript pour une bibliothèque, vous avez probablement déjà utilisé un CDN public, mais vous ne le savez peut-être pas.
## Qu’est-ce qu’un CDN ?Un CDN est un réseau de diffusion de contenu. Il s’agit de services d’hébergement de fichiers pour de multiples versions de bibliothèques communes. Ils sont généralement très performants et proposent des fichiers mis en cache en fonction de l’emplacement, de sorte que, où que se trouvent vos utilisateurs, ils reçoivent les fichiers à partir d’emplacements géographiques proches d’eux. Votre application peut ainsi être plus rapide que si vous hébergez vous-même les fichiers.
Les CDN présentent également l’avantage que si vous utilisez des bibliothèques communes à plusieurs sites, vos utilisateurs peuvent déjà avoir le fichier en cache dans leur navigateur. Cela accélère votre site car le navigateur n’a pas besoin de télécharger à nouveau la bibliothèque.
CdnJS utilise la version 26.2.1. CdnJS adopte une approche légèrement différente de la dénomination des versions, il est donc utile de vérifier le menu déroulant des versions sur la liste de la grille AG cdnJS
Un « CDN piloté par npm » est un CDN qui héberge le code de distribution des bibliothèques qui se déploient sur npm.
Dans le code source de mon précédent post du freeCodeCamp, j’ai utilisé le CDN unpkg.com pour importer AG Grid dans mon code en utilisant un élément de script.
Comme pour tout code que nous copions et collons, il est important de comprendre ce qu’il fait afin de pouvoir gérer les problèmes éventuels.
Quels sont les CDN disponibles ?
Je n’ai jamais utilisé que trois CDN :
Ce sont tous des sites professionnels et bien gérés. Et la principale raison pour laquelle j’en ai choisi un plutôt qu’un autre est que le tutoriel que j’ai suivi pour la première fois pour une bibliothèque utilisait ce CDN particulier dans le code.
Savoir que plusieurs CDN sont disponibles est utile car :
- une version particulière d’une bibliothèque que vous voulez utiliser peut ne pas se trouver sur tous les CDN
- si un CDN commence à avoir des problèmes, vous pouvez modifier votre code pour en utiliser un autre
- certaines bibliothèques peuvent être plus populaires sur un CDN que sur un autre et vous pouvez vouloir utiliser le CDN le plus populaire pour augmenter les chances que le code de la bibliothèque JavaScript soit mis en cache sur le navigateur de vos utilisateurs.
les CDN denpm
distribuent plus que du JavaScript
Les CDN distribuent plus que du JavaScript. Par exemple, AG Grid déploie des fichiers CSS ainsi que du JavaScript.
Ceux-ci seraient référencés à partir du CDN de manière normale en utilisant des éléments de lien.
Par exemple, AG Grid utilise deux feuilles de style.
La feuille de style structurelle fournit le CSS qui mettra en page les données sous forme de grille.
“ La feuille de style de thème fournit l’esthétique visuelle de la grille.
“ Ces deux fichiers CSS sont également déployés sur npmjs.com et peuvent être inclus dans notre projet depuis un CDN.
Comment (et pourquoi) contrôler la version de la bibliothèque
<script src="https://unpkg.com/[email protected]/dist/ag-grid-community.min.nostyle.js"></script>
</code></pre>
Les importations d’unpkg sont démontrées dans cette page html déployée.
Faker a récemment connu un problème avec une version récente déployée sur npm. Ainsi, si mon code avait utilisé par défaut la dernière version, mon application aurait échoué.
Heureusement, j’avais importé une version spécifique de Faker depuis unpkg. Comme vous pouvez le voir dans l’URL src ci-dessous, j’ai inclus la version 5.5.3:
“
Il y a un certain nombre d’avantages à contrôler la version :
- vous aurez testé votre application sur une version spécifique. Si vous déployez en production et laissez la version changer à chaque nouvelle version, votre application risque de présenter progressivement des bogues ou des incompatibilités au fil du temps, car vous n’avez pas testé votre application sur la nouvelle version de la bibliothèque.
- lors de l’utilisation de plusieurs versions de bibliothèques, les versions futures peuvent entrer en conflit les unes avec les autres, provoquant à nouveau l’échec de votre application en production et peut-être sans que vous vous en rendiez compte.
J’importe les trois bibliothèques que j’utilise à des versions spécifiques :
“
Cela me permet de contrôler les tests et je suis plus sûr que tout bogue dans l’application sera le résultat de mon codage, plutôt que d’une mise à jour d’une bibliothèque utilisée dans le projet.
Les différents CDN peuvent avoir une syntaxe différente pour contrôler les numéros de version. Mais vous pourrez voir le format à utiliser en recherchant la bibliothèque sur le CDN et en suivant la documentation fournie par chaque CDN.
Voici les listes d’AG Grid sur chacun des sites CDN :
Si vous suivez les liens pour les paquets AG Grid, vous verrez que chaque site a une interface légèrement différente. Mais ils permettent tous de sélectionner une version spécifique d’AG Grid et vous permettent de copier et coller l’URL à ajouter à votre fichier HTML.
Le CDN en pratique
Voici un simple fichier HTML qui rendra une grille de données à l’écran.
Je ne dois déployer que le fichier HTML, car la bibliothèque AG Grid est chargée dans le navigateur depuis le CDN.
Dans l’exemple ci-dessous, je charge la version 26.2.1 de AG Grid et les fichiers CSS depuis le CDN unpkg.com.
Dans mon outil d’édition de tableaux open source, j’utilise trois bibliothèques : AG Grid, PapaParse et Faker.
Je pourrais facilement utiliser d’autres CDN en modifiant les éléments script et lien dans la section head de mon fichier html.
JSDelivr utilisant la version 26.2.1
Par exemple, AG Grid, dont j’ai fait la démonstration dans mon article« Comment convertir un tableau HTML statique en une grille de données JavaScript dynamique« , se déploie sur npm mais ne dispose pas de son propre CDN. Au lieu de cela, les programmeurs peuvent ajouter une référence directe à AG Grid à partir d’un CDN comme unpkg.com.
cDNpilotés par npm
Toutes les bibliothèques ne disposent pas de leur propre CDN. La plupart des bibliothèques se déploient sur npmjs.com et comptent sur le programmeur pour ajouter la bibliothèque à son projet via npm au moment de la construction. npm télécharge la bibliothèque depuis un CDN et l’ajoute au projet localement.
Par exemple, JQuery dispose d’un CDN JQuery officiel. Si la plupart des applications JQuery importent la bibliothèque JQuery à partir de ce CDN, les utilisateurs sont plus susceptibles d’avoir déjà JQuery dans leur cache.
## Résumé
Il n’est pas toujours nécessaire de déployer des bibliothèques JavaScript sur notre site avec nos fichiers HTML. Au lieu de cela, nous pouvons les inclure de manière à ce qu’elles soient livrées par un réseau de diffusion de contenu.
De nombreux didacticiels que nous suivons montrent des exemples de cette méthode.
Si nous importons du JavaScript ou du CSS à partir d’un CDN, nous devons ajouter le numéro de version de la bibliothèque que nous utilisons afin de protéger notre exemple déployé de problèmes futurs en cas de mise à jour de la bibliothèque.
Une bonne habitude à prendre est d’ajouter la version chaque fois que nous suivons un tutoriel. Si nous remarquons que les fichiers inclus dans le CDN n’ont pas de version, cela vaut la peine de visiter le CDN pour savoir quelle est la version actuelle de la bibliothèque. Vous pouvez ensuite ajouter ce numéro de version à votre source.
Ce sont de petits ajustements comme celui-ci qui rendront les projets de portfolio que vous créerez sur Github un peu plus professionnels.
FAQ
Quels sont les CDN publics les plus populaires ?
Les CDN publics les plus populaires incluent Google Fonts, jQuery CDN et CDNJS.
Comment puis-je trouver les liens directs vers les fichiers hébergés sur un CDN public ?
Vous pouvez trouver les liens directs vers les fichiers hébergés sur un CDN public en consultant la documentation du CDN ou en utilisant des outils de recherche en ligne.
Est-il sécuritaire d’utiliser un CDN public ?
Oui, l’utilisation d’un CDN public est généralement sécuritaire, mais il est important de choisir un CDN public réputé et de suivre les meilleures pratiques de sécurité.
Comment puis-je mettre à jour les fichiers hébergés sur un CDN public ?
Vous pouvez mettre à jour les fichiers hébergés sur un CDN public en suivant les instructions du CDN ou en utilisant des outils de gestion de version.
Quels sont les avantages de l’utilisation d’un CDN public par rapport à l’hébergement de fichiers sur mon propre serveur ?
L’utilisation d’un CDN public peut améliorer la performance et la sécurité de votre site Web, réduire la charge sur votre serveur et fournir une expérience utilisateur plus rapide.
À lire aussi sur le site
Questions fréquentes
Comment réussir importer du javascript et du css depuis un cdn public ?
Lorsque vous écrivez une application JavaScript Vanilla, vous n êtes pas obligé d héberger tout le code que vous utilisez sur votre propre site. Les bibliothèques JavaScript les plus populaires sont d
Quel est le matériel nécessaire pour importer du javascript et du css depuis un cdn public ?
Le matériel dépend du contexte précis. Reportez-vous à la section dédiée dans cet article pour la liste détaillée et nos recommandations.
Combien de temps faut-il prévoir pour importer du javascript et du css depuis un cdn public ?
Selon votre niveau et le contexte, comptez généralement entre 30 minutes et plusieurs heures. Les détails de durée sont précisés dans le guide.
Quelles sont les erreurs à éviter ?
Les erreurs les plus fréquentes sont détaillées dans cet article, avec les bonnes pratiques pour les éviter et obtenir un résultat satisfaisant.
À lire aussi
Stratégies de Marketing pour les Salons, Conférences et Congrès : Comment Attirer et Conqu…
Participer à des salons, conférences et congrès représente une opportunité unique pour les entreprises, startups, associations et institutions publiques d’améliorer leur visibilité, de générer de nouv
Comment créer un clone de Wordle en JavaScript
Dans cet article, vous allez recréer le jeu de devinette Wordle. Cet article couvre la logique de base du jeu mais n implémente pas le partage de vos résultats. L article ne couvre pas non plus la fon
Comment utiliser le chaînage optionnel en JavaScript
Le chaînage optionnel est un moyen sûr et concis d effectuer des contrôles d accès pour les propriétés d objets imbriqués. L opérateur de chaînage optionnel ?. prend la référence à sa gauche et vérifi
XChat arrive sur iOS : découvrez toutes ses fonctionnalités et comment y accéder
Les enjeux de l’arrivée de XChat sur iOS : une nouvelle ère pour la messagerie instantanée en 2026 En 2026, le paysage des applications de communication connaît une transformation notable avec l’arriv