ECMAScript 2020 中的 dynamic import 和 import() 方法的区别-JavaScript中文网-JavaScript教程资源分享门户

近期，ECMAScript 2020 最终规范已经发布，更新了许多新特性。其中一个最值得关注的特性是 dynamic import 和 import() 方法。这两种方法都用于异步加载模块，但是二者有所不同。让我们深入了解它们的区别以及如何使用它们。

Dynamic Import 和 Import() 方法的定义

在软件工程中，模块是将程序分解为独立部分的一种方式，每个模块应该封装其独特的信息和功能，以便于开发、调试和维护。在 JavaScript 中，一个模块可以由一个或多个 JavaScript 文件组成，并且可以通过 import 和 export 语句对其进行定义和引用。

在 ECMAScript 2020 中，dynamic import 是一种新型的引用方式，它允许在运行时异步地加载模块。而 import() 方法（也称为“动态 import”）则是一个动态调用，它返回一个 Promise，该 Promise 解析为具有指定名称的模块对象。

使用 dynamic import，我们可以在 JavaScript 中动态加载模块。以下是它的语法：

const module = await import(modulePath);

其中 modulePath 是一个表示要加载的模块路径的字符串。import() 方法有类似的语法：

import(modulePath).then((module) => {
  //...
}).catch((error) => {
  //...
});

这里 modulePath 也是一个字符串，而 .then() 和 .catch() 方法是 Promise 提供的方法。

需要注意的是，虽然 dynamic import 可以在 JavaScript 中异步地加载模块，但是它只能在支持 ECMAScript 的浏览器和 Node.js 版本中使用。而 import() 方法则可以在不同平台和浏览器上使用。

尽管 dynamic import 和 import() 方法都可以用于异步加载模块，但是它们之间还有一些关键的区别。

在常规的 ES6 模块导入操作中，所有模块都在同一时间加载或导入。但是，dynamic import 允许在需要时按需导入模块。这意味着，当程序开始运行时，只会加载所需的模块，并不会在一次性加载所有模块时增加额外的负载。

import() 方法的一个潜在用途是通过自定义的虚拟路径动态地加载自定义的模块。这种方法可以将动态性和自定义性融合在一起，以在开发中实现更自由的结构。

Webpack 的 import() 方法可以用于动态加载国际化语言，从而在基于路由的代码拆分的情况下仅按需加载所需的国际化语言，极大地降低了应用程序的初始化成本。

使用 dynamic import，我们可以动态地加载 UI 组件。这使得应用程序能够减少初始启动时间并增强用户体验。

async function loadComponent(name) {
  const component = await import(`./components/${name}.js`);
  return component;
}

上面的代码展示了如何使用 dynamic import 加载一个名为 name 的 UI 组件。此方法只有当需要显示该组件时才会被加载。

在 ECMAScript 2020 中，dynamic import 和 import() 方法是两种不同的异步加载模块的方式。它们可以根据需要加载模块并提供更高的动态性和自由性。我们可以使用它们来优化应用程序的性能、初始启动时间和用户体验，并创建更灵活的结构。

虽然这两种方法只是 ECMA 规范中的一小部分，但它们已经赢得了社区的广泛关注和支持。它们是如此重要，以至于我们应该了解它们的使用方法，以便我们能够在项目中充分使用这些特性。

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