在前端开发中，我们经常需要导入模块来使用其中的功能。在 ES6 中，我们通过使用 import 语句来导入模块。但是，ES6 中的 import 语句是静态的，也就是说，它只能在代码的顶部使用，并且不能在运行时动态地导入模块。这就限制了我们在某些情况下的灵活性。
ES2021 中引入了 import() 函数，它允许我们在运行时动态地导入模块。在本文中，我们将详细介绍如何在 ES2021 中使用 import() 实现动态导入模块。
为什么需要动态导入模块？
在某些情况下，我们需要在运行时动态地导入模块，比如：
- 当用户执行某些操作时才需要加载某些模块，以减少初始加载时间；
- 当模块很大或者很复杂时，我们可以将其分成多个小模块，只在需要时才加载。
如何使用 import() 动态导入模块？
使用 import() 函数可以在运行时动态地导入模块。它返回一个 Promise 对象，该 Promise 对象解析为一个模块对象。下面是一个简单的示例：
import('./module.js')
.then(module => {
// 使用 module 中的功能
})
.catch(error => {
// 处理错误
});在上面的示例中，我们使用了 import() 函数来动态导入一个名为 module.js 的模块。该函数返回一个 Promise 对象，我们可以使用 then 方法来处理成功的情况，使用 catch 方法来处理错误的情况。
需要注意的是，由于 import() 函数返回的是一个 Promise 对象，因此我们不能在 import() 语句后面立即使用导入的模块。如果我们需要使用导入的模块，我们需要在 then 方法中使用它。
动态导入模块的实际应用
动态导入模块可以在很多场景下使用。下面是一些实际应用的示例：
1. 按需加载模块
在某些情况下，我们需要按需加载模块，以减少初始加载时间。比如，在一个页面中，我们可能只需要在用户点击某个按钮时才加载某个模块。
-- -------------------- ---- -------
-------------------------------- -- -- -
---------------------
------------ -- -
-- -- ------ ----
--
------------ -- -
-- ----
---
---在上面的示例中，当用户点击按钮时，我们使用 import() 函数来动态导入模块。
2. 分割大模块
当模块很大或者很复杂时，我们可以将其分成多个小模块，只在需要时才加载。
-- -------------------- ---- -------
----------------------
------------- -- -
-- -- ------- ----
------ -----------------------
--
------------- -- -
-- -- ------- ----
------ -----------------------
--
------------- -- -
-- -- ------- ----
--
------------ -- -
-- ----
---在上面的示例中，我们将一个大模块分成了三个小模块，并使用 import() 函数在需要时动态导入。
总结
在 ES2021 中，我们可以使用 import() 函数动态地导入模块。这使得我们可以在运行时动态地加载模块，从而实现按需加载和分割大模块等功能。需要注意的是，由于 import() 函数返回的是一个 Promise 对象，因此我们不能在 import() 语句后面立即使用导入的模块。如果我们需要使用导入的模块，我们需要在 then 方法中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65125e8f95b1f8cacdad5d4e