ES11（ES2020）中引入了一个新的特性，即 import() 动态导入模块。这个特性可以让开发者在运行时动态地加载模块，从而提高代码效率和可维护性。在这篇文章中，我们将详细介绍 import() 动态导入模块的用法和优势，并给出具体的示例代码。
import() 是什么？
我们先来看一下 import() 的基本语法：
import(moduleName)
.then((module) => {
// 使用 module...
})
.catch((error) => {
console.error(error);
});可以看到，import() 函数需要一个字符串参数，表示需要导入的模块路径。该函数返回一个 Promise 对象，当导入成功时，Promise 对象的 then() 方法会被调用，传入的参数是导入的模块。当导入失败时，Promise 对象的 catch() 方法会被调用，传入的参数是错误信息。
import() 的优势
import() 的主要优势在于运行时动态加载模块，可以让程序更加高效和灵活。运行时动态加载模块可以让程序根据需要在特定时刻加载某些模块，在节省资源的同时提高了程序的可维护性。这样一来，程序就可以根据不同的需求动态选择加载哪些模块，比如根据用户需求、设备类型等等。同时，也可以将某些功能拆成不同的模块并根据需要加载，提高了可复用性。
import() 示例
下面我们来展示一些使用 import() 的具体示例，以帮助读者更好地理解该特性的应用。
假设我们有一个模块 user.js，其内容如下：
export const getUser = () => {
return {
name: 'foo',
email: 'foo@example.com'
};
};现在我们有这样一个场景：用户登录成功后会跳转到一个特定的页面，该页面有一个用于显示用户信息的组件 UserInfo。我们希望当用户登录成功后才动态加载 UserInfo 组件，避免浪费资源和影响页面性能。下面是我们使用 import() 的示例代码：
-- -------------------- ---- -------
-------------------
-------------- -- -
----- - ------- - - -------
----- ---- - ----------
----- -------- - ------------------------------
-------------------- - ----- ----- ------------- ------ ---------------
------------------------------------
--
-------------- -- -
---------------------
---可以看到，我们使用了 import() 函数动态导入模块 user.js，然后通过 Promise 的 then() 回调来使用从模块 user.js 中导出的 getUser 函数。接着，我们创建了一个 div 元素，并将用户信息添加到该元素中。最后，我们把这个 div 元素添加到了页面的 body 元素中。
总结
在本文中，我们详细介绍了 ES11（ES2020）中的 import() 动态导入模块特性，并给出了具体的示例代码。通过学习这一特性，我们可以更好地理解如何在运行时动态地加载模块，从而提高程序效率和可维护性。不难看出，import() 动态导入模块是一个非常有用的功能，它可以帮助我们更好地组织和维护前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ce74648841e9894998e11