在前端开发中，动态加载是一个非常常见的需求。在之前的版本中，我们可以使用 require() 或者 import 语句来实现动态加载。但是这些方法都有一些限制，比如必须在代码的顶部定义所有的依赖项，不能在运行时动态地加载模块。为了解决这个问题，ECMAScript 2021 引入了 import() 函数。
import() 函数是一个异步加载模块的方法，它返回一个 Promise 对象，可以在运行时动态地加载模块。这意味着我们可以根据需要在代码中加载模块，而不必提前定义所有的依赖项。
使用 import() 函数
使用 import() 函数非常简单，只需要在需要加载模块的地方调用它即可。例如，我们可以在一个按钮的点击事件中加载一个模块：
document.querySelector('button').addEventListener('click', async () => {
const module = await import('./my-module.js');
// 使用加载的模块
});在这个例子中，我们使用了 import() 函数加载了一个名为 my-module.js 的模块，并将其赋值给了一个变量 module。这个变量可以被用来访问模块中导出的内容。
需要注意的是，import() 函数返回一个 Promise 对象，因此我们需要使用 async/await 或者 .then() 来处理它的返回值。
优化动态加载
import() 函数不仅仅是一个动态加载模块的方法，它还可以帮助我们优化动态加载的性能。
在之前的版本中，我们通常会使用 require.ensure() 或者 System.import() 来实现动态加载，但是这些方法在性能方面都存在一些问题。require.ensure() 会在加载模块时创建一个新的块，而 System.import() 会将所有的依赖项一起加载，这都会导致额外的网络请求和性能问题。
相比之下，import() 函数只会加载需要的模块，它不会创建新的块或者加载不需要的依赖项。这使得它比其他方法更加轻量级和高效。
示例代码
下面是一个使用 import() 函数加载模块的示例代码：
-- -------------------- ---- ------- -- ------------ ------ -------- ---------- - ------------------- --------- - -- -------- ---------------------------------------------------------- ----- -- -- - ----- ------ - ----- ------------------------- ------------------ ---
在这个例子中，我们定义了一个名为 my-module.js 的模块，它导出一个名为 sayHello() 的函数。我们在 index.js 中使用 import() 函数动态加载了这个模块，并调用了它的 sayHello() 方法。
结论
import() 函数是 ECMAScript 2021 中一个非常有用的新特性，它可以帮助我们优化动态加载的性能，并且可以在运行时动态地加载模块。如果你想要在代码中实现动态加载，那么 import() 函数是一个非常好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6725fd662e7021665e194866