Une brève discussion sur la méthode d'importation dynamique des modules ECMAScript

Les modules ECMAScript (alias ES2015 ou ES) sont un moyen d'organiser des blocs de code cohérents en JavaScript.

Le système de modules ES comprend 2 parties :

• Module import - utilisez import { func } depuis './myModule'
import模块 - 使用 import { func } from './myModule'
• export模块-  使用 export const func = () => {}

import 模块是使用 import 语法导入依赖项的模块:

import { concat } from './concatModule';

concat('a', 'b'); // => 'ab'

而被导入的模块使用export语法从自身导出组件:

export const concat = (paramA, paramB) => paramA + paramB;

import { concat } from './concatModule'使用ES模块的方式是静态的：意味着模块之间的依赖关系在编译时就已经知道了。

虽然静态导入在大多数情况下是有效的，但有时我们想节省客户的带宽并有条件地加载模块。

为了实现这一点，我们可以用不同的方式使用 import(pathToModule) 语法对模块进行新的动态导入：作为一个函数。动态导入是ES2020开始的一个JavaScript语言特性。

1. 动态模块的导入

当import关键字用作函数而不是静态导入语法时:

const module = await import(pathToModule);

它返回一个promise ，并开始一个加载模块的异步任务。如果模块被成功加载，那么promise就会解析到模块的内容，否则，promise 就会被拒绝。

请注意，pathToModule可以是任何表达式，其值为表示导入模块路径的字符串。有效的值是普通的字符串字面意义（如./myModule）或有字符串的变量。

例如，我们在一个异步函数中加载一个模块。

async function loadMyModule() {
  const myModule = await import('./myModule');
  // ... use myModule
}

loadMyModule();

有趣的是，与静态导入相反，动态导入接受以模块路径求值的表达式

async function loadMyModule(pathToModule) {
  const myModule = await import(pathToModule);
  // ... use myModule
}

loadMyModule('./myModule');

现在，了解了如何加载模块后，我们来看看如何从导入的模块中提取组件。

2.导入组件

2.1 导入命名组件

考虑下面的模块：

// namedConcat.js
export const concat = (paramA, paramB) => paramA + paramB;

这里导出了一个 concat 函数。

如果想动态导入namedConcat.js，并访问命名的导出concat，那么只需通解构的方式就行了：

async function loadMyModule() {
  const { concat } = await import('./namedConcat');
  concat('b', 'c'); // => 'bc'
}

loadMyModule();

2.2 默认导出

如果模块是默认导出的，我们可以使用default属性来访问。

还是上面的例子，我们将defaultConcat.js里面的concat函数默认导出:

// defaultConcat.js
export default (paramA, paramB) => paramA + paramB;

在动态导入模块中,可以使用default属性来访问:

async function loadMyModule() {
  const { default: defaultImport } = await import('./defaultConcat');
  defaultImport('b', 'c'); // => 'bc'
}

loadMyModule();

注意，default在JavaScript中是一个关键字，所以它不能用作变量名。

2.3导入混合形式

如果模块里面既有默认导出也有命名导出，同样也是使用解构的方式来访问：

async function loadMyModule() {
  const { 
    default: defaultImport,
    namedExport1,
    namedExport2
  } = await import('./mixedExportModule');
  // ...
}

loadMyModule();

3.何时使用动态导入

建议在模块比较大的，或者要根据条件才导入的模块可以使用动态导入。

async function execBigModule(condition) {
  if (condition) {
    const { funcA } = await import('./bigModuleA');
    funcA();
  } else {
    const { funcB } = await import('./bigModuleB');
    funcB();
  }
}

execBigModule(true);

对于小模块(如前面例子中的namedConcat.js或defaultConcat.js)，只有几十行代码，使用动态导入在点杀鸡用牛刀感觉。

总结

当调用 import(pathToModule) 作为一个函数时，其参数表示一个模块的指定符（又称路径），那么就会动态加载该模块。

在这种情况下，module = await import(pathToModule)export Module - Utiliser export const func = () => {}

import Le module utilise import importe les modules dépendants : <p>rrreee</p> tandis que le module importé utilise la syntaxe <code>export pour exporter des composants depuis lui-même :

rrreee

import { concat } from './concatModule'La façon d'utiliser les modules ES est statique : cela signifie que les dépendances entre modules sont déjà connues au moment de la compilation.

Bien que les importations statiques fonctionnent dans la plupart des cas, nous souhaitons parfois économiser de la bande passante sur nos clients et charger les modules de manière conditionnelle.

Pour y parvenir, nous pouvons faire une nouvelle importation dynamique du module en utilisant la syntaxe import(pathToModule) d'une manière différente : en fonction. L'importation dynamique est une fonctionnalité du langage JavaScript commençant par ES2020.

1. Import de modules dynamiques

Lorsque le mot clé import est utilisé comme fonction. au lieu de Lors de l'importation statique de la syntaxe : 🎜rrreee🎜 Il renvoie une promesse et démarre une tâche asynchrone de chargement du module. Si le module est chargé avec succès, alors promise sera résolu en contenu du module, sinon, promise sera rejetée. 🎜🎜Veuillez noter que pathToModule peut être n'importe quelle expression dont la valeur est une chaîne représentant le chemin d'accès au module importé. Les valeurs valides sont des chaînes littérales ordinaires (telles que ./myModule) ou des variables avec des chaînes. 🎜🎜Par exemple, on charge un module dans une fonction asynchrone. 🎜rrreee🎜Fait intéressant, contrairement aux importations statiques, les importations dynamiques acceptent des expressions qui évaluent les chemins des modules🎜rrreee🎜Maintenant, après avoir compris comment charger les modules, voyons comment extraire les composants des modules importés. 🎜🎜2. Importer des composants🎜🎜2.1 Importer des composants nommés🎜🎜Considérez le module suivant : 🎜rrreee🎜Une fonction concat est exportée ici. 🎜🎜Si vous souhaitez importer dynamiquement namedConcat.js et accéder à l'export nommé concat, alors utilisez simplement la déstructuration : 🎜rrreee🎜2.2 Export par défaut 🎜🎜Si le module est exporté par défaut, nous pouvons utiliser l'attribut default pour y accéder. 🎜🎜Toujours avec l'exemple ci-dessus, nous allons exporter la fonction concat dans defaultConcat.js par défaut : 🎜rrreee🎜Dans le module d'import dynamique, vous pouvez utiliser attribut default code> auquel accéder : 🎜rrreee🎜 Notez que <code>default est un mot-clé en JavaScript, il ne peut donc pas être utilisé comme nom de variable. 🎜🎜2.3 Importer sous forme mixte🎜🎜S'il y a à la fois des exports par défaut et des exports nommés dans le module, ils sont également accessibles via la déstructuration : 🎜rrreee🎜3. Quand utiliser l'importation dynamique🎜🎜Il est recommandé d'utiliser l'importation dynamique lorsque le module est relativement volumineux ou que le module doit être importé en fonction sous conditions. 🎜rrreee🎜Pour les petits modules (tels que namedConcat.js ou defaultConcat.js dans l'exemple précédent), qui n'ont que des dizaines de lignes de code, utiliser l'importation dynamique est excessif . Sentir. 🎜🎜Résumé🎜🎜Lors de l'appel de import(pathToModule) en tant que fonction, ses paramètres représentent A spécificateur de module (également appelé chemin), le module sera alors chargé dynamiquement. 🎜🎜Dans ce cas, module = wait import(pathToModule) renvoie une promesse qui se résout en un objet contenant le composant de module importé. 🎜🎜Les importations dynamiques sont prises en charge par Node.js (13.2 et supérieur) et la plupart des navigateurs modernes. 🎜🎜🎜Adresse originale en anglais : https://dmitripavlutin.com/ecmascript-modules-dynamic-import/🎜🎜Auteur : Dmitri Pavlutin🎜🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!