Comment importer dynamiquement JavaScript avec des cartes d'importation
L'importation dynamique dans les pages Web se fait via une fonctionnalité appelée cartes d'importation. Vous allez en savoir plus sur la charge dynamique, le comportement de l'outil de construction par défaut et l'utilisation de cartes d'importation avec un exemple étape par étape. Commençons.
Comportement de l'outil de construction par défaut
Par défaut, lorsque vous exécutez une page Web HTML et que tous les scripts qui sont inclus à l'intérieur sont compilés dans un seul gros fichier. Toutes les bibliothèques externes et internes sont instantanément chargées dans la mémoire (serveur) et beaucoup de complexité est ajoutée au projet en raison du chargement de divers extraits de code externe en même temps.
Auparavant, les applications JavaScript étaient très simples et basiques, mais au fil du temps, les applications deviennent de plus en plus difficiles et complexes, et c'est exactement pourquoi le chargement de toutes les bibliothèques externes en même temps avant même qu'elles ne soient nécessaires n'est pas une solution efficace. C'est là que le chargement dynamique et la modularité des scripts sont utiles.
Chargement dynamique
Comme son nom l'indique, c'est le processus de chargement des bibliothèques et des scripts externes uniquement lorsqu'ils sont nécessaires, c'est-à-dire au moment de l'exécution. En ce qui concerne le script de l'application Web, le chargement dynamique du script est effectué par une fonctionnalité dans ES6 appelée modules dans lequel les scripts sont divisés en composants plus petits. De même, l'importation est également effectuée au moment de l'exécution à l'aide de cartes d'importation.
Pour charger les importations au moment de l'exécution, nous utilisons une fonctionnalité appelée cartes d'importation, Cette fonction nous permet de remplacer la procédure par défaut des outils de construction et charge paresseuse nos importations / bibliothèques; Le chargement paresseux signifie le chargement uniquement lorsqu'il est nécessaire.
Pour démontrer l'importation dynamique des scripts externes dans une page Web, vous allez configurer une page Web qui effectue une tâche simple, après, nous allons importer une bibliothèque / package externe et utiliser sa fonction pour effectuer la même tâche
Note: Vous avez besoin d'un éditeur de code (de préférence vs code) pour ceci et Nodejs,
Étape 1: Configuration d'un HTML et d'un fichier de script
Pour démontrer l'utilisation des cartes d'importation pour un chargement dynamique, nous aurons besoin d'installer NodeJS sur notre système, cliquez ici pour lire l'installation de NodeJS.
Créez un dossier sur votre machine et ouvrez ce dossier avec VS Code (ou l'éditeur de code souhaité) comme indiqué ci-dessous:
À l'intérieur du dossier, créez un fichier html nommé maison.html et un fichier de script comme scénario.js:
Nous allons afficher des mots en utilisant le fichier de script. Donc, dans le fichier html, ajoutez la balise de script suivante.
Note: nous utilisons le Type de propriété et le définir égal à module Pour informer le navigateur qu'il s'agit d'un script modulaire.
Maintenant, à l'intérieur du fichier de script, saisissez les lignes de code suivantes pour imprimer du texte à la page Web HTML.
const el = document.createElement ('p');const Words = "Linux, indice, tutoriel!"
const texte = document.CreateTextNode (mots);
El.APPEDCHILD (texte);
document.corps.Annexe (EL);
Pour exécuter le fichier, ouvrez le terminal du code vs et tapez "NPX Service», Si c'est la première fois que vous essayez la commande NPX Serve, il pourrait installer le«servir”Package et demandez une affirmation, puis il démarrera l'installation:
Après cela, la commande NPX Serve nous montrera où il héberge notre page Web HTML, alors cliquez sur le lien comme suit:
Lorsque vous ouvrez le lien http: // localhost: 3000, vous verriez la sortie suivante:
Étape 2: Importation de bibliothèque externe
Nous allons importer startcase Méthode du loger Bibliothèque et utilisez cette méthode StartCase pour convertir nos chaînes en type «Démarrer le boîtier» à l'aide du code suivant:
Importer StartCase à partir de «@ lodash / startcase»;Note: Démarrer le type de cas signifie que chaque mot aura la première lettre dans un cas en capital.
Vous allez modifier le fichier de script en tant que:
Importer StartCase à partir de "@ Lodash / StartCase";const el = document.CreateElement ("P");
const todisplay = "Linux, indice, tutoriel!"
const texte = document.CreateTextNode (startCase (toDisplay));
El.APPEDCHILD (texte);
document.corps.Annexe (EL);
Comme vous pouvez le voir, le code est un peu différent, nous passons le Afficher variable au startcase fonction.
Actualisez la page et vous verrez l'erreur suivante sur votre console de développeur:
En effet, le navigateur ne sait pas quoi faire avec cette instruction d'importation au début du script
déposer. Le navigateur essaie de trouver le loger Package sur le serveur Web local, c'est également le comportement par défaut de l'outil de construction. Pour changer cela, nous utilisons des cartes d'importation dans des fichiers HTML.
Étape 3: Utilisation de cartes d'importation
Map d'import, est une fonctionnalité ES6, il contient une paire de valeurs de clé, la clé étant le nom de l'importation et la valeur étant l'emplacement de l'importation.
La syntaxe du La carte d'importation est:
Pour notre cas, nous ajoutons la balise de script suivante, y compris la carte d'importation:
Note: La balise de script contenant la carte d'importation doit être ajoutée avant la balise de script contenant le type modulaire.
Après avoir ajouté ces lignes, actualisez votre page Web et vous devriez voir la sortie:
Comme vous pouvez le voir, le startcase Méthode a réussi à convertir nos mots de chaîne en «démarrage du boîtier». Vous incluez maintenant les bibliothèques externes dynamiquement et nous pouvons examiner le chargement paresseux dans les outils du développeur du navigateur.
Étape 4: Examiner le chargement paresseux
Ouvrez la console de développeur du navigateur et dirigez-vous vers l'onglet réseau.
Sous la cascade, vous pouvez voir quel script se chargeait à quelle heure:
Et à partir de là, vous pouvez clairement voir que tous les scripts n'étaient pas chargés au début, ils étaient chargés paresseusement au moment de l'exécution.
Conclusion
Dans JavaScript, l'importation dynamique est effectuée par une fonctionnalité appelée Cartes d'importation. L'importation dynamique signifie remplacer le comportement par défaut des outils de construction et importer des bibliothèques externes lorsqu'elles sont nécessaires au moment de l'exécution, car parfois vous avez besoin d'une bibliothèque sur une seule partie de votre application Web et non des autres. Les outils de construction par défaut chargeront toutes les bibliothèques dans un seul fichier, ce qui entraînera une augmentation de la consommation de mémoire. Vous avez appris à utiliser les cartes d'importation dans des bibliothèques externes de chargement paresseuses avec un exemple et à l'examiner dans la console du développeur.