Duplicate module

What is a JavaScript module ?

A module is a JavaScript resource embedded in the page containing segmented and reusable code. It allows to bring additional functionalities to the browser in a simple way. For example, the JQuery library makes it easier to navigate and manipulate the DOM (Document Object Model: a programming interface useful for modifying the page using JavaScript code) thanks to a set of simplified functionalities.

Why is it important that they are not duplicate ?

Loading the same module several times is not useful because the code is already present in the page and can be exploited by the browser. A module declared several times therefore unnecessarily increases the weight of the page, as well as the interpretation required by the browser and delays its loading.

How do I correct a duplicate module ?

The detection of duplicate modules is based on their "source Maps" file (additional folder that allows debugging the code). Usually these files are filled by the CDN (Content Delivery Network) within the script itself with the instruction "//# sourceMappingURL=...".

When the same module is loaded several times, it is necessary to keep only one integration instruction in the HTML and/or JavaScript code.

For example, the Bootstrap framework is loaded twice despite different names :

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

In order to correct it, you have to remove of one of the two statements :

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