Retour

Modules dupliqués

Qu'est-ce qu'un module JavaScript ?

Un module est une ressource JavaScript intégrée à la page contenant du code segmenté et réutilisable. Il permet d'apporter des fonctionnalités supplémentaires très simplement au navigateur. Par exemple, la bibliothèque JQuery facilite le parcours et la manipulation du DOM (Document Object Model : interface de programmation utile pour la modification de la page par le code JavaScript) grâce un ensemble de fonctionnalités simplifiées.

Pourquoi est-il important qu'ils ne soient pas dupliqués ?

Charger un même module plusieurs fois n'est pas utile du fait que le code est déjà présent dans la page et peut être exploité par le navigateur. Un module déclaré plusieurs fois alourdit donc inutilement le poids de la page, ainsi que l'interprétation nécessaire par le navigateur et retarde son chargement.

Comment corriger un module dupliqué ?

La détection des modules dupliqués se base sur leur fichier "source Maps" (fichier supplémentaire qui permet de déboguer le code). Généralement ces fichiers sont renseignés par les CDN (Réseau de diffusion de contenu) au sein du script même grâce à l'instruction "//# sourceMappingURL=...".

Lorsqu'un même module est chargé plusieurs fois, il est nécessaire de ne garder qu'une seule instruction d'intégration au niveau du code HTML et/ou JavaScript.

Par exemple, le framework Bootstrap est ici chargé deux fois malgré  des noms différents :

<script src="/js/bootstrap.bundle.js"></script>
<script src="/js/bootstrap.js"></script>

La correction à apporter est simplement la suppression de l'une des deux déclarations :

<script src="/js/bootstrap.js"></script>