在 ECMAScript 2020 标准中，import() 彻底赋予了异步加载模块的优势，变得更加简单和清晰。在本文中，我们将会探讨如何使用 import() 异步加载模块，以及如何在升级到 ECMAScript 2020 的过程中更好地应用这种方法。
什么是 import()？
在早期版本的 ECMAScript 中，我们可以使用关键字 import 来导入模块，并在代码中使用它。但是，在导入这些模块时，我们必须在代码的顶部将它们全部导入，这样的话会导致代码结构不够清晰。
在 ECMAScript 2015 中，我们首次使用了动态导入的概念，这样我们就可以在代码的任何地方引入模块。例如：
// 早期版本
import { foo } from './module.js'
// ECMAScript 2015
import('./module.js')
.then(module => module.foo())在这个例子中，我们可以看到 import()，这个函数的作用是将模块作为其参数来动态加载。在加载完成后，该函数会返回一个 Promise，我们可以使用 .then() 方法处理它。
使用 import() 的好处
使用 import() 有几大好处：
- 仅在需要时加载模块，从而加快了应用程序的启动速度。
- 允许多个模块同时加载，这样我们就可以并发处理它们。
- 可以使用条件语句来选择要加载的模块，这样可以更加灵活地控制代码的执行。
如何使用 import()？
让我们来看一个具体的例子。在这个例子中，我们将动态加载一个模块，并从中导出一个函数。
async function loadModule() {
const module = await import('./module.js')
return module.default
}
loadModule().then(module => module())在这个例子中，我们定义了一个异步函数 loadModule()。我们使用 await 操作符异步等待模块加载完成之后，把返回的对象储存在变量 module 中。
在 loadModule() 函数中，我们通过 return 导出了模块的默认函数。这个函数可以被我们随后的调用中使用。
在最后一行代码中，我们通过 then() 方法访问模块并调用我们从模块中导出的函数。
升级到 ECMAScript 2020
在 ECMAScript 2020 标准中，import() 功能已经得到了进一步的完善。现在，我们可以使用类似 import() as myModule 的语法：
const myModule = await import('./module.js')这样，我们可以像使用普通模块一样使用异步导入的模块。这样做可以让我们更加方便地升级到 ECMAScript 2020 标准，并让我们更方便地管理我们的代码。
总结
异步导入模块可以大大加速我们的应用程序，离线加载和动态加载可以缩短启动时间并提高应用程序的响应能力。
在 ECMAScript 2020 中，我们可以通过使用 import() 的新语法来使我们的代码更加清晰和易于管理。这个新语法可以让我们更好地利用异步加载模块的优势，并且让我们的代码更加可读。
使用 import() 是一个强大且灵活的过程，可以帮助我们开发更好的代码，并且更加方便地升级到最新的 ECMAScript 标准。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e57891f6b2d6eab30ead25