Share
L'utilisation de JavaScript ayant explosé ces dernières années, le nombre de scripts chargés dans une page Web moyenne a également augmenté. Avec ces balises de script vient beaucoup de bagages, tels que le blocage et le manque de gestion de la dépendance.
Aujourd'hui, j'aimerais attirer votre attention sur un certain nombre de chargeurs JavaScript, qui sont des mini-kits d'outils simplifiant considérablement l'ajout et le chargement de scripts..
La page cesse de se passer pendant le téléchargement du script.
Fichiers JavaScript chargés à l'aide du scénario Les balises bloquent par nature. Tout ce qui se passe ou se charge sur la page est interrompu pendant le téléchargement et l'exécution du script. Et rappelez-vous que cela s'applique à chaque balise de script. Certains navigateurs modernes peuvent vous permettre de les télécharger en parallèle, mais le reste de la page est toujours bloqué..
L'absence de gestion de la dépendance est un gros inconvénient.
La prochaine étape est la gestion des dépendances. Pour votre page Web moyenne, vous n'en avez probablement pas besoin. Vérifiez si votre bibliothèque est chargée et passez à autre chose. Pour une application Web non triviale, ce n’est pas une excellente solution. Vous devrez charger les scripts de manière conditionnelle en fonction des dépendances. Même dans ce cas, vous devrez toujours déterminer l’ordre dans lequel ils sont chargés. Vous pouvez probablement le faire manuellement pour 3-4 fichiers, mais lorsque les choses commencent à s'accumuler, vous êtes probablement mieux avec une solution automatisée..
L'idée initiale de cette analyse a été lancée par un article publié dans Hacker News sur la création d'une liste de chargeurs de scripts JavaScript, il y a environ un mois. J'ai vu la liste grimper de 3 à 10 avant de perdre tout intérêt et de passer à autre chose..
Maintenant que suffisamment de temps a passé, je pense que cette liste sera très longue. Malheureusement, mon Google-fu est assez faible et je n'arrive pas à le trouver. Si un utilisateur aux yeux d'aigle parvient à trouver ce fil de discussion, postez-le dans les commentaires ci-dessous afin que je puisse créer un lien vers celui-ci et, éventuellement, étendre ma liste.
Cette liste est issue des recommandations de développeurs Web de haut niveau qui utilisent ces outils dans leurs applications..
Et en ce qui concerne mes choix ici, cette liste représente un sur-ensemble de recommandations qui ont afflué après que j’ai demandé à des membres de la communauté d’avant de présenter leurs solutions. Certaines des solutions ci-dessous peuvent également gérer la gestion des dépendances, bien que la plupart s’en tiennent à un simple chargement asynchrone. Indépendamment des subtilités supplémentaires, chacun des scripts ci-dessous fait une chose avec aplomb - charger des scripts Java avec un minimum de tracas.
Donc, sans plus tarder, et sans ordre particulier:
Head JS charge les scripts en parallèle quel que soit le nombre de scripts et le navigateur. Charger des scripts comme des images. Utilisez HTML5 et CSS3 en toute sécurité. Cible CSS pour différents écrans, chemins, états et navigateurs. Faites-en le seul script dans votre HEAD.
Auteur: Tero Piirainen
URL du projet: Ici
Taille: 6,3 KB
Liens connexes:
LABjs (chargement et blocage de JavaScript) est un chargeur JavaScript polyvalent et à la demande, capable de charger n'importe quelle ressource JavaScript, de n'importe quel emplacement, dans n'importe quelle page, à tout moment. Vous pouvez facilement spécifier les scripts ayant des dépendances d'ordre d'exécution et LABjs garantira un ordre d'exécution correct. LABjs peut ainsi être utilisé en toute sécurité pour pratiquement toutes les ressources JavaScript, que vous les contrôliez / hébergiez ou non, qu’elles soient autonomes ou qu’elles fassent partie d’un plus grand arbre de dépendance..
Auteur: Kyle Simpson
URL du projet: Ici
Taille: 4,7 KB
Liens connexes:
RequireJS est un chargeur de fichiers et de modules JavaScript. Il est optimisé pour une utilisation dans le navigateur, mais il peut être utilisé dans d'autres environnements JavaScript, tels que Rhino et Node. L'utilisation d'un chargeur de script modulaire tel que RequireJS améliorera la vitesse et la qualité de votre code..
Auteur: James Burke
URL du projet: Ici
Taille: 13 Ko
Liens connexes:
ControlJS est un module JavaScript qui gère à la fois les scripts intégrés et les scripts externes, retarde l'exécution du script après le rendu de la page, permet aux scripts d'être téléchargés et non exécutés et s'intègre à de simples changements HTML et à aucun changement de code.
Auteur: Steve Souders
URL du projet: Ici
Taille: 3,6 Ko
Liens connexes:
Le projet StealJS est un ensemble d’utilitaires JavaScript basés sur les commandes et les clients, qui facilitent la création, l’emballage, le partage et la consommation d’applications JavaScript. Inclut des modules pour la gestion des dépendances, la compression JS, le nettoyage et la journalisation.
Auteur: Brian Moschel
URL du projet: Ici
Taille: 11,4 Ko
Liens connexes:
yepnope est un chargeur de ressources conditionnel asynchrone ultrarapide qui vous permet de charger uniquement les scripts dont vos utilisateurs ont besoin. Il fonctionne avec JavaScript et CSS et dispose d'une suite de tests complète dans QUnit que vous pouvez exécuter dans votre ensemble de navigateurs pris en charge pour vous assurer qu'il fonctionne..
Auteur: Alex Sexton et Ralph Holzmann
URL du projet: Ici
Taille: 3,4 Ko
Liens connexes:
Le chargeur permet d’amorcer un environnement CommonJS cohérent et à la pointe de la technologie pour toutes les plates-formes prises en charge (sur le serveur et dans le navigateur) et est donc parfaitement adapté pour être utilisé comme cible de la commande commonjs et pour le développement de plates-formes croisées. Applications et bibliothèques JavaScript.
Auteur: Christoph Dorn
URL du projet: Ici
Taille: 22 Ko
Liens connexes:
JSLoad est un chargeur de fichiers Javascript que nous avons écrit pour Instructables. Vous lui donnez un ensemble de dépendances et de groupes, et il charge les fichiers dont vous avez besoin, lorsque votre code d'exécution en a besoin. L’utilité réelle de JSLoad réside dans sa capacité à regrouper les dépendances à l’aide de balises.
Auteur: Eric Nguyen
URL du projet: Ici
Taille: 9,8 Ko
Liens connexes:
JsDefer propose un chargement parallèle / série basé sur des définitions, des dépendances, enveloppé ou non enveloppé, et indiquant si les dépendances sont définies dans un fichier def séparé ou dans le script lui-même. L'intégration à Deferred (comme dans jQuery 1.5) permet ou simplifie de nombreux scénarios de cas d'utilisation autres.
Auteur: Boris Moore
URL du projet: Ici
Taille: 4,7 KB
Liens connexes:
Le JSL propose un chargement à la demande, est un chargement JavaScript asynchrone dynamique pouvant être mis en mémoire cache, un chargement différé et une prévention des sources dupliquées parmi une tonne d'autres fonctionnalités..
Auteur: Andres Vidal
URL du projet: Ici
Taille: 2,1 Ko
Liens connexes:
L'utilitaire Get fournit un mécanisme pour attacher les ressources script et css - y compris les ressources interdomaines - au DOM une fois la page chargée..
Auteur: Adam Moore
URL du projet: Ici
Taille: 17,9 Ko
Liens connexes:
DominateJS vous permet de charger de manière asynchrone tout votre JavaScript et de différer l'exécution séquentielle jusqu'au chargement de la page. DominateJS vise à être une bibliothèque multi-navigateur et 100% document.write-safe! C’est une évolution fortement modifiée (et puissante!) De ControlJS.
Auteur: Chris Joel & Jason Benterou
URL du projet: Ici
Taille: 48 Ko
load.js est un micro JS lazy-loader. Construit au dessus de chain.js, il vous permet de charger en différé ou parallèle vos scripts JS et de gérer des chaînes de dépendances complexes.
Auteur: Chris O'Hara
URL du projet: Ici
Taille: 2 Ko
Liens connexes:
BravoJS est une implémentation d’une version préliminaire proposée pour les modules CommonJS / 2.0.
Auteur: Wes Garland
URL du projet: Ici
Taille: 10,7 Ko
Bootstrap est une petite bibliothèque pour le chargement dynamique de fichiers JavaScript..
Son cas d'utilisation principal consiste à utiliser dans votre code JS le chargement de fichiers JS uniquement lorsqu'ils sont utilisés..
Auteur: Scott Koon
URL du projet: Ici
Taille: 1,3 Ko
LazyLoad est un tout petit utilitaire JavaScript sans dépendance (seulement 904 octets minifiés et gzippés) qui permet de charger très facilement des fichiers JavaScript et CSS externes à la demande..
Dans la mesure du possible, LazyLoad chargera automatiquement les ressources en parallèle tout en garantissant l'ordre d'exécution lorsque vous spécifiez un tableau d'URL à charger. Dans les navigateurs ne conservant pas l'ordre d'exécution des scripts chargés de manière asynchrone, LazyLoad chargera les scripts en toute sécurité de manière séquentielle..
Auteur: Ryan Grove
URL du projet: Ici
Taille: 1,6 Ko
curl.js est un chargeur asynchrone conforme à AMD, petit mais très rapide. Taille actuelle: 4,5 Ko (2,1 ko compressés) à l'aide du compilateur de fermeture de Google.
Si vous souhaitez utiliser curl.js pour des modules non-AMD (fichiers javascript ordinaires), vous voudrez utiliser la version avec js! plugin intégré. Vous pouvez également souhaiter intégrer le module domReady. Le chargeur combiné curl + js + domReady n’a encore que 6,1 Ko (2,7 Ko compressé).
Auteur: John Hann
URL du projet: Ici
Taille: 5 Ko
$ script.js est un chargeur JavaScript asynchrone et un gestionnaire de dépendances avec une empreinte étonnamment impressionnante et légère. Comme beaucoup d'autres chargeurs de scripts, $ script.js vous permet de charger des ressources de script à la demande à partir de n'importe quelle URL et de ne pas bloquer le chargement d'autres ressources, telles que CSS et les images..
Auteur: Dustin Diaz
URL du projet: Ici
Taille: 1,4 Ko
NBL.js est un petit script qui accélérera le chargement de vos pages HTML en chargeant tous vos fichiers JavaScript de manière asynchrone (en parallèle) avec le reste de votre page. Normalement, si vous incluez deux ou trois scripts dans votre page, le navigateur attend qu'ils soient exécutés avant l'affichage de votre page..
Auteur: Berklee
URL du projet: Ici
Taille: 971 B
Liens connexes:
Bien que chacun des outils répertoriés ci-dessus gère le chargement du script de manière légèrement différente, veillez à effectuer vos tests lorsque vous décidez lequel vous convient le mieux..
Comme je l'ai mentionné plus tôt, si vous pensez qu'un chargeur devrait être ici mais ne l'est pas, envoyez-nous une ligne ci-dessous et nous mettrons à jour la synthèse en conséquence.
Accentsconagua