ES 模块动态导入

目录

1.动态导入

2. 导入组件

2.1 动态导入 named

2.2 动态导入 default

2.3 动态导入混合内容

3. 何时使用动态导入

4. 结论

ES 模块是一种在 JavaScript 中组织内聚代码块的方法。这是一个简单的 ES 模块：

// An ES module
import { concat } from './concatModule.js';concat('a', 'b'); // => 'ab'

import { concat } from './concatModule.js'被视为静态导入。

静态导入在大多数情况下都有效。但有时为了节省客户端带宽，您可能选择动态加载模块。

import如果使用函数，则可以动态导入 ES 模块——import(pathToModule)这是从 ES2020 开始提供的功能。

让我们看看 ES 模块的动态导入如何工作，以及它何时有用。

1.动态导入

当import关键字用作函数时

const module = await import(path)

import(path)返回一个承诺，并启动一个异步任务来加载位于 的模块path。如果模块加载成功，则承诺解析模块内容；否则，承诺拒绝。

path可以是任何计算结果为表示路径的字符串的表达式。有效的路径表达式包括

// Classic string literals
const module1 = await import('./myModule.js');// A variable
const path = './myOtherModule.js';
const module2 = await import(path);// Function call
const getPath = (version) => `./myModule/versions/${version}.js`;
const moduleVersion1 = await import(getPath('v1.0'));
const moduleVersion2 = await import(getPath('v2.0'));

import(path)返回一个 Promise，语法非常好用async/await。例如，让我们在异步函数中加载一个模块：

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

现在，知道了如何加载模块，让我们从导入的模块中提取组件（默认或命名）

2. 导入组件

2.1 动态导入 named

让我们考虑以下模块，名为namedConcat.js：

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

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

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

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

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

const { default: defaultComponent, namedExport1,namedExport2
} = await import(path);