在 ECMAScript 2020 中，一个新的特性动态导入（dynamic import）被加入了标准中，让开发者能够动态、延迟地导入模块。 这个特性是为浏览器、Node.js 和其它 ECMAScript 环境提供的一种新的方式来加载模块。那么，它具体是如何工作的呢？本文将为读者详细介绍。
动态导入
动态导入 import() 可以让我们在运行时（而不是在代码加载时）动态地加载模块。这样做可以让我们：
- 在需要的时候才加载模块，提高运行效率；
- 避免加载整个模块，减轻网络开销；
- 使得代码更加可读，以及更加易于维护。
换句话说，动态导入会把一个字符串作为输入，然后异步地返回一个模块的 namespace 对象，这个对象包含了待导入模块的所有内容。同时，它也为我们提供了一种手段，使得我们能够在获取到某些条件之后再去加载相应的模块。这就大大提高了我们使用模块的灵活性。
异步加载模块示例
动态导入的语法非常简单，就像是一个函数那样。我们把需要延迟加载的模块的路径放到一个字符串里面传进去，接着这个函数会返回一个 Promise 对象。当这个 Promise 对象 resolved 时，它返回了我们需要的 namespace 对象。
假设我们现在希望异步加载一个类库，需要用到类库内部的一个文件，我们可以使用如下的代码来实现：
(async () => {
const library = await import('https://some-cdn.com/library.js');
console.log(library.something);
})();这个代码片段会异步地从 URL https://some-cdn.com/library.js 加载类库。然后，它会打印出这个类库的属性 something。
需要注意的是，返回内容必须要使用 await 进行包装，并且必须放在一个 async 函数中。否则，你将无法获取到最终的命名空间对象。
动态加载条件模块示例
动态导入还可以在某些条件满足时再来加载某个模块。举个例子，假如你正在开发一个账户的管理系统，你需要根据用户的权限来加载不同的模块。你可以使用动态导入，来满足这个需求。示例如下：
const user = await getUser();
const module = await import(`./modules/${user.role}.js`);
module.setup();这个代码片段会根据不同的用户权限加载相应的 JavaScript 文件。在这个例子中，当用户成功登录后，它会异步地获取到一个用户对象，然后根据用户角色来动态加载相应的模块。
需要注意的是，模板字符串里面使用的 path 不仅仅可以是静态的字符串。你还可以通过某个算法来得到需要导入的文件的文件名。在实际应用中，这个功能可以为我们提供很大的方便。
总结
动态导入是一个非常有用的功能，可以大大提高 JavaScript 应用程序的灵活性、可读性和可维护性。它的语法很简单，在 ECMAScript 2020 以后，动态导入也可以在浏览器、Node.js 和其它 ECMAScript 环境中使用了。希望大家都能够灵活地掌握这个特性，并且在实际应用中体现出它的价值。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6544e1077d4982a6ebeaf0ba