Charger vos scripts en asynchrone

Temps de lecture : < 1 minute

Le chargement de vos fichiers Javascript ralentit le chargement de page. Ceci est logique car le navigateur doit télécharger les fichiers avant de faire l’affichage. Grâce à Require.js vous allez pouvoir charger vos JavaScript en asynchrone. C’est-à-dire charger le texte, les images, les styles puis seulement une fois que la page est affichée correctement, et que le lecteur peut commencer à lire le contenu, le JavaScript. Require.js permet aussi de détecter les fichiers qui ont déjà été chargés afin de ne pas les recharger.

L’utilisation du script est très simple, dans un premier temps, il faut inclure le fichier contenant require.js :

Puis à la fin du body il faut dire à require.js de charger les autres scripts :

require([
            "scripts/underscore.js",
            "scripts/jquery.js",
            "scripts/backbone.js"
        ], function(){
            $('#exemple').html('Jquery loaded!')
        })

Le gain au chargement de la page est assez intéressant, surtout depuis la refonte complète de la librairie.