Importation dynamique en JavaScript

Au début de l'année dernière, il a été proposé d'introduire l'importation dynamique dans JavaScript. Si quelqu'un ne le sait pas, maintenant seule l'importation statique est prise en charge en natif dans JavaScript, et il y a des raisons à cela, mais c'est un sujet pour une autre discussion. La proposition a été mise en œuvre et incluse dans la liste des prochaines mises à jour d'ECMAScript. Google Chrome avec la version 63 prend déjà en charge cette fonctionnalité. Je vais vous dire un peu ce que c'est et où cela peut être utile.


L'importation dynamique est utilisée de la même manière que l'importation statique, mais elle présente plusieurs différences clés:


L'importation syntaxiquement dynamique est similaire à l'appel de fonction: import ('path / to / module.js');


La commande import ('path / to / file.js') renvoie Promise, qui passera à l'état rempli après que le module lui-même sera tiré et installé directement, ainsi que toutes ses dépendances. Et cela signifie que nous pouvons écrire comme ceci:


import('path/to/module.js') .then(module => { module.loadPageInto(main); }) .catch(err => { main.textContent = err.message; }); 

Ou même comme ça:


 const module = await import('path/to/module.js'); 

Remarque importante: bien que l'importation dynamique soit syntaxique et ressemble à un appel à la fonction import (), ce n'est pas une fonction. Il n'est pas hérité de Function.prototype, ce qui signifie qu'il ne peut pas être appelé via appel ou appliquer.


Il existe de nombreuses applications pour l'importation dynamique, require.js a longtemps eu une opportunité similaire et webpack, si je ne me trompe pas aussi, beaucoup d'entre vous ont probablement utilisé cette fonctionnalité depuis longtemps. Maintenant, il sera possible de le faire en mode natif. Mais d'un autre côté, la possibilité d'importer dynamiquement, selon les conditions, pendant l'exécution fournit également un endroit pour du code plus confus, bien que je comprenne que vous pouvez coller un mauvais code avec n'importe quoi, ce n'est pas l'outil. Écrivez votre opinion dans le commentaire, que pensez-vous de l'importation dynamique.


Vous pouvez lire plus et voir ici:
https://github.com/tc39/proposal-dynamic-import
https://developers.google.com/web/updates/2017/11/dynamic-import
https://www.youtube.com/watch?v=eg8eLH52d4s&t=31s

Source: https://habr.com/ru/post/fr455200/


All Articles