Javascript : RequireJS, Optimisez le chargement de vos librairies javascript.

Require.JS

Voici une très petite librairie JavaScript qui permet d’économiser sur le temps de téléchargement et par conséquent, d’attente lors de la navigation de votre site.

RequireJs permet de charger les modules JavaScript parallèlement à la page. Actuellement, sans l’utilisation de RequireJS, ils doivent être complétés séquentiellement avant l’affichage. De plus, Il place les modules en « mémoire cache » pour éviter leur rechargement répété. Ainsi, l’usager n’a pas à attendre la fin des chargements pour visualiser vos pages web.

Voici une comparaison avec mon fureteur Firefox du temps d’accès épargné :

Sans Require (164ms) / Avec Require (12ms)

Utilisation

Voici à quoi ressemble un fichier source HTML qui utilise cette librairie :

<script type="text/javascript" src="scripts/require-min.js"></script>

<script type="text/javascript">

  require([

    "scripts/underscore.js",

    "scripts/jquery.js",

    "scripts/backbone.js"

  ], function(){

    $('#exemple').html('jQuery & other files loaded');

  });

</script>

Dans l’exemple ci-dessus, on voit que seul le fichier « require-min.js » est inclus de façon traditionnelle. Les trois autres (underscore, jquery et backbone) sont importés par notre vedette de jour, RequireJS.

RequireJS s’utilise comme un classique fichier JS ou bien s’installe dans des environnements JavaScript tel que NodeJs. Il est compatible avec toutes les versions de fureteurs et même les plus anciennes (IE6, FF 2, Chrome 3 etc.)

Liens

RequireJS
Node.js
A tiny javascript loader with cache control