Précharger les modules

Sérgio Gomes
X

Le développement basé sur des modules offre de réels avantages en termes de mise en cache, ce qui vous aide à réduire le nombre d'octets que vous devez fournir à vos utilisateurs. La précision plus fine du code facilite également le chargement, car elle vous permet prioriser le code critique de votre application.

Toutefois, les dépendances de modules provoquent un problème de chargement, car le navigateur a besoin d'attendre le chargement d'un module avant de découvrir quelles sont ses dépendances. Aller simple précharge les dépendances pour que le navigateur sache toutes les fichiers à l'avance et peut entretenir la connexion.

<link rel="preload"> est un moyen de demander des ressources de manière déclarative à l'avance, avant que le navigateur n'en ait besoin.

<head>
  <link rel="preload" as="style" href="critical-styles.css">
  <link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2">
</head>

Navigateurs pris en charge

  • Chrome: 50 <ph type="x-smartling-placeholder">
  • Bord: ≤79. <ph type="x-smartling-placeholder">
  • Firefox: 85 <ph type="x-smartling-placeholder">
  • Safari: 11.1. <ph type="x-smartling-placeholder">

Source

Cela fonctionne particulièrement bien avec des ressources telles que les polices, qui sont souvent masquées à l'intérieur de fichiers CSS, parfois à plusieurs niveaux. Dans ce cas, le navigateur devrait attendre plusieurs allers-retours avant de se rendre compte qu'il doit récupérer un fichier de police volumineux, alors qu'il aurait pu utiliser ce temps pour démarrer le téléchargement. et de profiter de toute la bande passante de la connexion.

<link rel="preload"> et son équivalent d'en-tête HTTP fournissent une interface moyen d'informer immédiatement le navigateur des fichiers critiques qui seront nécessaires dans le cadre de la navigation actuelle. Lorsque le navigateur détecte le préchargement, à télécharger en priorité pour la ressource, de sorte qu'au moment où elle est réellement nécessaire, soit déjà récupérées ou partiellement. Toutefois, elle ne fonctionne pas pour les modules.

C’est là que les choses deviennent délicates. Il existe plusieurs modes d'identification et que, pour obtenir un succès de cache, elles doivent correspondre, sinon vous risquez qui récupère la ressource deux fois. Il va sans dire que la récupération en double est néfaste, car elle permet gaspille la bande passante de l’utilisateur et le fait attendre plus longtemps, sans raison valable.

Pour les balises <script> et <link>, vous pouvez définir le mode des identifiants à l'aide de l'crossorigin . Cependant, il s'avère qu'un <script type="module"> sans L'attribut crossorigin indique un mode d'identifiants omit, qui n'existe pas. pour <link rel="preload">. Cela signifie que vous devez Remplacez l'attribut crossorigin dans <script> et dans <link> par un. des autres valeurs, et vous ne disposez peut-être pas d'un moyen facile de le faire le préchargement est une dépendance des autres modules.

De plus, la récupération du fichier n'est que la première étape de l'exécution effective du code. Le navigateur doit d'abord l'analyser et le compiler. Dans l’idéal, cette étape doit également être réalisée à l'avance. Ainsi, lorsque le module est nécessaire, le code est prêts à être exécutés. Cependant, V8 (le moteur JavaScript de Chrome) analyse et compile les modules différemment des autres scripts JavaScript. <link rel="preload"> ne le fait pas fournir un moyen d'indiquer que le fichier en cours de chargement est un module, de sorte que tous les navigateurs ce que vous pouvez faire est de charger le fichier et de le mettre dans le cache. Une fois le script chargé à l'aide d'un <script type="module"> (ou s'il est chargé par un autre module), le navigateur analyse et compile le code en tant que module JavaScript.

En résumé, oui. Avec un type link spécifique pour le préchargement des modules, nous pouvons écrire du code HTML simple sans vous soucier du mode d’identification que nous utilisons. La les valeurs par défaut fonctionnent.

<head>
  <link rel="modulepreload" href="super-critical-stuff.mjs">
</head>
[...]
<script type="module" src="super-critical-stuff.mjs">

Et comme le navigateur sait maintenant que ce que vous préchargez est un module, il peut être intelligent et analyser et compiler le module dès que la récupération est terminée, au lieu d'attendre jusqu'à ce qu'il s'exécute.

Navigateurs pris en charge

  • Chrome: 66 <ph type="x-smartling-placeholder">
  • Bord: ≤79. <ph type="x-smartling-placeholder">
  • Firefox: 115 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Source

Qu'en est-il des modules les dépendances ?

C'est drôle que vous me le demandiez ! Il y a en effet quelque chose que cet article n'a pas abordé: la récursion.

La spécification <link rel="modulepreload"> permet d'effectuer un chargement facultatif du module demandé, mais aussi de toute son arborescence de dépendances. Les navigateurs n’ont pas besoin le faire, mais ils peuvent le faire.

Quelle serait la meilleure solution inter-navigateurs pour précharger un module et son car vous aurez besoin de l'arborescence complète pour exécuter l'application ?

Les navigateurs qui choisissent de précharger les dépendances de manière récursive doivent disposer d'une déduplication efficace de modules. Il est donc généralement recommandé de déclarer le module et la liste plate de ses dépendances, et faites en sorte que le navigateur ne récupère pas deux fois le même module.

<head>
  <!-- dog.js imports dog-head.js, which in turn imports
       dog-head-mouth.js, which imports dog-head-mouth-tongue.js. -->
  <link rel="modulepreload" href="dog-head-mouth-tongue.mjs">
  <link rel="modulepreload" href="dog-head-mouth.mjs">
  <link rel="modulepreload" href="dog-head.mjs">
  <link rel="modulepreload" href="dog.mjs">
</head>

Le préchargement des modules améliore-t-il les performances ?

Le préchargement peut aider à maximiser l'utilisation de la bande passante en indiquant au navigateur il doit récupérer pour ne rien faire pendant de longs allers-retours. Si vous testez des modules et que vous rencontrez des problèmes de performances dus les arborescences de dépendances, la création d'une liste aplatie de préchargements peut certainement aider.

Cela dit, les performances des modules sont toujours en cours de développement. vous pouvez examiner de près ce qui se passe dans votre application grâce aux outils pour les développeurs. En attendant, vous pouvez regrouper votre application en plusieurs fragments. Il y a beaucoup de des modules en cours dans Chrome. Nous sommes donc de plus en plus les bundlers leur repos bien mérité !