Importation dynamique de modules en JavaScript

Lorsqu’il s’agit de développer des sites efficaces, la vitesse de chargement des pages est cruciale – en particulier pour les utilisateurs qui visitent les sites depuis des appareils mobiles sur la vitesse du réseau de leur opérateur mobile. En 2021, Google classe les sites en fonction de plusieurs facteurs, depuis les changements cumulatifs de mise en page jusqu’à la vitesse de chargement des pages, en passant par les JavaScript inutilisés qui alourdissent les fichiers et réduisent le temps de chargement et les performances. En travaillant avec diligence pour réduire le nombre de scripts et le temps de chargement d’une page, un site obtiendra un meilleur score sur Google et d’autres moteurs de recherche, ce qui aidera les utilisateurs à trouver votre site et augmentera le nombre de visiteurs que vous recevez.

Dans le JavaScript moderne, les fichiers JS peuvent être décomposés en plusieurs fichiers plus petits et les composants peuvent être exportés uniquement lorsque cela est nécessaire. Cela permet de réduire les temps de chargement des pages et de faciliter la gestion de votre base de code et de la passer au peigne fin si vous ou un autre développeur devez la réviser ou la remanier ultérieurement. Voici un exemple de la façon dont un module JavaScript peut être importé dans JavaScript :

import User, { userDetail } from './Users.js'

Ce code importera les modules appelés Users et userDetails à partir du fichier JavaScript appelé users.js. Vous pouvez importer ces composants dans d’autres fichiers JS modulaires uniquement si nécessaire. C’est ce que l’on appelle une importation statique, et le plus gros problème avec l’importation de modules de cette manière est que le navigateur téléchargera ce code immédiatement lorsqu’il sera inclus – ce qui peut conduire à des chargements de page très lents, ce qui nuit aux classements SERP et peut même pousser les visiteurs impatients à naviguer aussi loin que possible de votre site.

Une meilleure façon de mettre en œuvre des importations modulaires dans votre JavaScript est d’utiliser des importations de modules dynamiques. Tout comme les importations de modules statiques, vous pouvez importer certains modules uniquement lorsqu’ils sont nécessaires, mais les importations de modules dynamiques vous permettent d’importer le code uniquement lorsqu’il est absolument nécessaire à l’aide d’instructions logiques conditionnelles. Cela permet d’accélérer le chargement des pages, car le navigateur n’essaie pas de télécharger tout le JavaScript immédiatement. Si l’utilisateur n’a pas besoin d’utiliser un module, celui-ci ne sera pas chargé.

Il existe plusieurs façons d’utiliser les importations dynamiques de modules en JavaScript. Voyons comment importer dynamiquement le même module que précédemment :

import('./Users.js').then(({ default: User, userDetail }) => {
    //This will be the code that depends on the module...
});

Cette méthode est assez similaire à l’importation statique du module, mais cette importation est une fonction qui renvoie une promesse (Promise). La promesse contient tous les détails du module. Vous remarquerez également que l’exportation par défaut du module doit être restructurée à partir de la valeur de retour de la promesse. C’est là qu’intervient la fonction default : User entre en jeu – il s’agit de faire correspondre l’exportation par défaut du module à la variable User. Cette fonction d’importation peut être simplifiée et nettoyée encore plus en utilisant une fonction asynchrone. Voici un exemple :

const { default: User, userDetail } = await import('./Users.js');

Cette méthode fonctionne exactement de la même manière que la fonction promise, mais elle est beaucoup plus propre et plus facile à utiliser.

L’utilisation de modules importés dynamiquement est bénéfique pour plusieurs raisons. Les trois principales raisons auxquelles je pense sont d’améliorer la vitesse de chargement initiale des pages et d’éviter les polyfills inutile du navigateur. Imaginons que nous construisions une application de commerce électronique qui utilise une fonction de panier d’achats. La logique du panier est assez complexe et nécessite donc beaucoup de code pour fonctionner. Traditionnellement, l’ensemble de ce code est immédiatement téléchargé par le navigateur, ce qui peut entraîner un chargement très lent de la page. Les modules importés dynamiquement, cependant, peuvent combattre ce problème en nous permettant de télécharger la logique du panier uniquement lorsque l’utilisateur interagit réellement avec le panier.

Voici un exemple :

addToCartBtn.addEventListener('click', async () => {
  const { showCart, checkout } = await import('./cart.js');
});

Le code ci-dessus importe les modules logiques nécessaires pour ajouter la fonctionnalité au panier, uniquement lorsque l’utilisateur clique sur le bouton « Ajouter au panier ». Ainsi, le code du panier n’est chargé que lorsqu’il est absolument nécessaire, ce qui accélère la vitesse de chargement des pages pour les visiteurs qui n’interagissent jamais avec le panier.

Dans beaucoup d’applications, il peut y avoir beaucoup de polyfills en place qui permettent de prendre en charge des caractéristiques et des fonctions sur des navigateurs plus anciens. Ces polyfills peuvent ralentir considérablement la vitesse de chargement des pages pour les utilisateurs qui n’en ont pas besoin, ce qui peut très certainement avoir un impact sur l’expérience utilisateur des visiteurs utilisant des navigateurs modernes. Nous pouvons utiliser des modules dynamiques pour importer les polyfills uniquement s’ils sont nécessaires :

if (isLegacyBrowser){
  import('./polyfills.js');
}

Cette importation n’a pas de valeur de retour, car lorsqu’un module est importé, tout le code du module est importé et les polyfills se mettent en place automatiquement lorsqu’ils sont nécessaires. Il est donc possible d’implémenter une fonction qui renvoie la valeur true si l’utilisateur utilise un navigateur plus ancien, et le module polyfills sera alors importé.

Un autre développeur a souligné que lorsqu’on travaille sur des applications globales, il peut y avoir beaucoup de fichiers et de code liés à l’internationalisation qui offrent un support et une traduction pour de nombreuses langues différentes. En chargeant tous ces modules de support linguistique lors du chargement initial, le navigateur les téléchargera tous, ce qui réduira très probablement la vitesse de chargement des pages pour les utilisateurs. Et si nous avions la possibilité d’importer les fichiers d’internationalisation uniquement s’ils sont nécessaires – et même dans ce cas, uniquement ceux qui sont nécessaires pour la langue spécifique de l’utilisateur ? C’est encore une autre utilisation des modules importés dynamiquement :

const userLang = window.navigator.userLanguage
|| window.navigator.language
const { localStrings } = await import(`strings.${userLang}.js`);

Ce code permet au navigateur de détecter la langue préférée de l’utilisateur en fonction de ses paramètres et de ne charger que les modules nécessaires à la prise en charge de cette langue.

Comme vous pouvez le constater, les modules importés dynamiquement sont très utiles en JavaScript. Elle permet un chargement initial plus rapide des pages, empêche le navigateur de télécharger du code inutilisé et offre une expérience utilisateur plus rapide et de meilleure qualité. Les exemples présentés dans cet article ne sont que quelques-unes des possibilités étonnantes offertes par les modules importés dynamiquement, mais j’espère qu’ils vous donneront des conseils utiles pour améliorer les performances et le classement de votre site ou de votre application.