ES11（ECMA2020）的 Dynamic Import（动态导入）-JavaScript中文网-JavaScript教程资源分享门户

什么是 Dynamic Import

Dynamic Import 是 ES11（ECMA2020）中的一个新特性，可以在运行时动态地导入模块，这使得我们可以根据需要来延迟加载模块，从而提高应用程序的性能和灵活性。

在 ES6 中，我们可以使用 import 来导入模块，但是 import 只能在模块的顶层使用，不能在函数内使用，也不能动态地导入模块。而 Dynamic Import 则可以让我们在任何需要导入模块的地方都能够使用，包括函数内部，而且还可以在运行时根据需要来动态加载模块。

如何使用 Dynamic Import

使用 Dynamic Import 很简单，只需要在需要导入模块的地方使用 import() 函数即可。这个函数返回一个 Promise 对象，可以用 then 方法来处理加载成功后的模块。

以下是一个简单的示例：

async function loadModule() {
  const module = await import('./module.js');
  module.sayHello();
}

loadModule();

在这个示例中，我们使用 import() 函数来动态加载 module.js 模块，并在加载成功后调用 sayHello 方法。

需要注意的是，import() 函数返回的是一个 Promise 对象，如果我们想要使用它返回的模块，需要使用 await 或者 then 方法来等待 Promise 对象的状态变为成功。

Dynamic Import 的优点

使用 Dynamic Import 有以下几个主要的优点：

延迟加载

Dynamic Import 可以让我们根据需要来动态加载模块，而不是在应用程序启动时一次性加载所有的模块。这可以减少应用程序的启动时间，并且在页面加载时只加载必要的代码。这可以大大提高应用程序的性能和用户体验。

更好的可维护性

通过延迟加载模块，我们可以将应用程序的代码分为多个模块，每个模块都专注于解决一个问题。这可以让我们的代码更好地组织和维护，并且可以方便地添加、删除和替换模块。

更高的灵活性

Dynamic Import 可以让我们在运行时根据需要来选择加载模块，这可以让我们的应用程序更加灵活。例如，在某些情况下，我们可能需要根据用户的选择来加载不同的模块，这时使用 Dynamic Import 就可以很方便地实现。

总结

Dynamic Import 是 ES11（ECMA2020）中的一个新特性，可以让我们在运行时动态地导入模块，从而提高应用程序的性能和灵活性。通过延迟加载模块，我们可以让应用程序更好地组织和维护，并且可以方便地添加、删除和替换模块。如果你想要在前端开发中使用 Dynamic Import，请务必学习和掌握这个特性，它将为你的开发工作带来很大的帮助。

示例代码：

// javascriptcn.com 代码示例
// module.js
export function sayHello() {
  console.log('Hello World!');
}

// main.js
async function loadModule() {
  const module = await import('./module.js');
  module.sayHello();
}

loadModule();

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652b39cf7d4982a6ebd3b21d