ES2020 核心特性解析：动态导入 (import()) 的使用方法-JavaScript中文网-JavaScript教程资源分享门户

在 ES2020 中，新增了一项非常强大的特性：动态导入（import()）。动态导入可以让我们在运行时动态地导入模块，在一些需要按需加载模块的场景下很有用。本篇文章将详细讲解动态导入的使用方法，帮助读者更好地理解该特性，并且为读者提供学习和指导的帮助。

简介

在 ES6 之前，JavaScript 的模块加载方式一般是通过使用静态导入（import）和导出（export）语句来实现，例如：

import { foo } from './foo.js';
export function bar() {
  return foo();
}

而在 ES2020 中，则有了动态导入（import()）的方式。

动态导入的使用方法

动态导入的语法如下：

import(moduleSpecifier)

其中，moduleSpecifier 是一个表示模块位置的字符串，可以是相对路径或绝对路径，也可以是一个 URL。

动态导入返回一个 Promise，当模块加载完成后，该 Promise 将 resolve 为一个包含模块所有导出信息的对象。我们可以通过 await 或 .then() 等方式来获取这个对象。

例如，我们可以将一个模块的路径存储在变量中，然后通过动态导入来加载该模块，如下所示：

const modulePath = './foo.js';
const module = await import(modulePath);
console.log(module.foo());

这里，我们使用了 await 等待模块加载完成，然后使用 import() 函数动态地导入模块，并获取其中导出的 foo 函数，最后打印出其执行结果。

动态导入的场景分析

使用动态导入主要有两个场景：

按需加载模块

当我们需要根据某些条件来确定是否加载某个模块时，可以使用动态导入。例如，在一个 web 应用中，用户在点击某个按钮时需要打开一个新的页面，但是该新页面的 JS 代码较大，如果直接在加载该页面时将所有代码都加载进来，可能会影响页面的加载速度。因此，我们可以将新页面的代码拆分成多个小块，然后根据用户的点击来动态地加载相应的代码块。

命令式地加载模块

当我们需要使用某些 JS 代码中的某些函数、类等时，可以在运行时通过动态导入来加载相应的模块。例如，在某个处理文件上传的函数中，我们需要使用一个处理图片的库，但是在该函数的其他部分并不需要这个库。因此，我们可以根据需要在该函数中动态地导入该库，而不是在文件的顶部将它静态地导入进来。

总结

动态导入（import()）是 ES2020 中一项非常强大的特性，它可以让我们在运行时动态地导入模块，在一些需要按需加载模块的场景下很有用。本文详细介绍了动态导入的语法和使用方法，并分析了两种使用场景。通过了解动态导入，我们可以更好地使用该特性来提高代码的运行效率和简化代码的编写。

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