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;namedConcat执行函数的命名导出concat。
要动态导入namedConcat.js并访问命名导出concat，请通过命名导出解构已解析的模块对象：
async function loadMyModule() {const { concat } = await import('./namedConcat.js');concat('b', 'c'); // => 'bc'
}loadMyModule();2.2 动态导入 default
要动态导入默认值default，只需从模块对象中读取属性。
假设将该defaultConcat.js函数作为default导出来：
// defaultConcat.js
export default (paramA, paramB) => paramA + paramB动态导入时defaultConcat.js，具体访问default导出时，只需读取default属性。
但这里有一个细微的差别。default是 JavaScript 中的关键字，所以它不能用作变量名。你可以使用带别名的解构：
2.3 动态导入混合内容
如果导入的模块导出default并有多个命名导出，那么您可以使用单个解构来访问所有这些组件：
async function loadMyModule() {const { default: defaultImport,namedExport1,namedExport2} = await import('./mixedExportModule.js');// ...
}loadMyModule();
3. 何时使用动态导入
我建议在有条件导入大模块时使用动态导入：
- 您可能会不时使用该模块，具体取决于运行时条件
- 您可能希望加载大模块的不同版本，这也取决于运行时条件。
例如：
async function execBigModule(condition) {if (condition) {const { funcA } = await import('./bigModuleA.js');funcA();} else {const { funcB } = await import('./bigModuleB.js');funcB();}
}execBigModule(true);4. 结论
动态加载模块调用import(path)作为函数，并使用指示模块说明符（又名路径）的参数。
const module = await import(path)返回一个承诺，该承诺解析为包含导入模块的组件的对象。
在该对象中，default属性包含默认导出，命名导出包含在相应的属性中：
const { default: defaultComponent, namedExport1,namedExport2
} = await import(path);Node.js（版本 13.2 及以上）和大多数现代浏览器都支持动态导入。