Utiliser des modules ES dans le navigateur aujourd'hui –

Cet article va vous montrer comment utiliser les modules ES dans le navigateur aujourd'hui.

Jusqu'à récemment, JavaScript n'avait pas de concept de modules. Il n'était pas possible de référencer ou d'inclure directement un fichier JavaScript dans un autre. Et au fur et à mesure que la taille et la complexité des applications augmentaient, cela rendait difficile l'écriture de JavaScript pour le navigateur.

Une solution courante consiste à charger des scripts arbitraires dans une page Web en utilisant des balises . Cependant, cela apporte ses propres problèmes. Par exemple, chaque script initie une requête HTTP qui bloque le rendu, ce qui peut rendre les pages lourdes JS plus lentes et lentes. La gestion des dépendances devient également compliquée, en raison de l'importance de l'ordre de chargement. ES6 (ES2015) a permis de remédier à cette situation en introduisant un seul standard de module natif. (Vous pouvez en savoir plus sur les modules ES6 ici .) Cependant, comme la prise en charge des modules ES6 était initialement médiocre, les utilisateurs ont commencé à utiliser des chargeurs de modules pour regrouper les dépendances dans un seul fichier compatible. Ce processus introduit ses propres problèmes et son degré de complexité. Mais de bonnes nouvelles sont à portée de main. La prise en charge du navigateur est de plus en plus efficace, voyons comment utiliser les modules ES6 dans les navigateurs d'aujourd'hui.

Le module Current ES Modules

Safari, Chrome, Firefox et Edge supporte tous les modules ES6 import ] syntaxe (Firefox derrière un drapeau), voici à quoi ils ressemblent.

 // html.js
balise de fonction d'exportation (balise, texte) {
  const el = document.createElement (tag)
  el.textContent = texte

  retourner el
}

Ou comme script externe:

 // app.js
import {tag} à partir de './html.js'

const h1 = tag ('h1', '? Hello Modules!')
document.body.appendChild (h1)

Ajoutez simplement type = "module" à vos tags de script et le navigateur les chargera en tant que modules ES. Le navigateur suivra tous les chemins d'importation, en téléchargeant et en n'exécutant chaque module qu'une seule fois.

Les anciens navigateurs n'exécuteront pas de scripts avec un "type" inconnu, mais vous pouvez définir des scripts de secours avec l'attribut nomodule :

Exigences

Firefox a besoin du drapeau dom.moduleScripts.enabled activé dans à propos de: config .

Vous aurez besoin d'un serveur pour pouvoir l'importer, car cela ne fonctionne pas avec le protocole file: // . Vous pouvez utiliser npx serve pour démarrer un serveur dans le répertoire courant pour le tester localement.

Si vous voulez charger des modules ES sur un domaine différent, vous devrez activer CORS
.

Si vous êtes assez audacieux pour essayer ceci en production aujourd'hui, vous aurez toujours besoin de créer des paquets séparés pour les anciens navigateurs. Il y a un polyfill disponible à browser-es-module-loader qui suit la spécification. Cependant, cela n'est pas recommandé du tout pour la production

Performance

Ne jetez pas vos outils de construction comme Babel et Webpack pour le moment, car les navigateurs sont encore en train d'implémenter des méthodes pour optimiser la récupération. Pourtant, il y a des pièges de performance et gains à avoir dans le futur avec des modules ES

Pourquoi nous regroupons

Aujourd'hui nous regroupons notre JavaScript pour réduire le nombre de HTTP les demandes sont faites, car le réseau est souvent la partie la plus lente du chargement d'une page Web. Ceci est toujours une préoccupation très valable aujourd'hui, mais le futur est prometteur: ES Modules avec la capacité de HTTP2 à diffuser plusieurs assets avec server push et les navigateurs implémentant le préchargement Préchargement

] link rel = "modulepreload" arrive bientôt dans un navigateur près de chez vous. Plutôt que d'avoir le navigateur résoudre tous les modules d'importation un par un, produisant une chute d'eau réseau comme ceci ...

 ---> GET index.html
 GET app.js
     GET html.js
         GET lib.js
            <---

... vous pourrez dire au navigateur que les pages nécessitent html.js et lib.js en gardant cette cascade sous contrôle:

 - -> GET /index.html
 GET app.js
      ---> GET html.js
      ---> GET lib.js
      <---
      <---
      <---

HTTP2 avec Server Push

HTTP2 est capable de pousser plusieurs ressources dans une seule réponse par rapport à HTTP1.1, qui ne peut en fournir qu'une seule. Cela permettra de réduire au minimum le nombre d'allers-retours sur le réseau.

Dans notre exemple, il serait possible de livrer index.html app.js et html.js en une seule requête:

 ---> GET /index.html
<--- index.html
<--- app.js
<--- html.js
<--- lib.js

Mise en mémoire cache

La mise en cache de plusieurs modules ES plus petits peut être bénéfique car le navigateur n'aura besoin que de récupérer ceux qui ont été modifiés. Le problème avec la production de gros paquets est que si vous changez une ligne, vous invalidez le paquet entier.

async / defer

Les modules ES ne sont pas bloqués par défaut, comme . Si vos modules n'ont pas besoin d'être exécutés dans le même ordre qu'ils sont définis dans le code HTML, vous pouvez également ajouter async pour les exécuter dès qu'ils sont téléchargés.

Bibliothèques

Les bibliothèques populaires commencent à être publiées en tant que modules ES maintenant, mais elles ciblent toujours les bundlers et non les importations directes. Cette petite importation humble déclenche une cascade de 640 demandes :

Et si nous faisons la bonne chose et importons juste la fonction dont nous avons besoin? Nous sommes à un simple 119 demandes :

Ceci est juste un exemple pour démontrer que lodash-es n'est pas conçu pour être chargé directement dans le navigateur. Pour ce faire, vous devrez toujours créer votre propre paquet avec les modules ES comme cible.

Support du navigateur

Comme le montre le tableau suivant, le support du navigateur pour les modules ES est bon (et s'améliore tout le temps)

Puis-je utiliser es6-module? Données sur la prise en charge de la fonctionnalité es6-module dans les principaux navigateurs de caniuse.com.

Le moment de commencer à expérimenter avec les modules ES dans le navigateur est maintenant. Assez rapidement, vous pourrez les utiliser dans tous les navigateurs modernes sans transpiler ou bundler, si vous le souhaitez.