在 ECMAScript 2021 中，新增了一个重要的特性，即动态导入（Dynamic Import）。这个特性可以让我们在运行时动态地加载 JavaScript 模块，而不需要在编译时就把所有的依赖都加载进来。这样可以显著地提高应用的性能，特别是在 Web 应用中，因为网络延迟往往是性能瓶颈之一。
动态导入的语法
动态导入的语法非常简单。它使用一个特殊的函数 import()，这个函数可以接受一个字符串参数，表示要加载的模块的路径。比如：
import('./module.js')
.then(module => {
// do something with the module
})
.catch(error => {
// handle the error
});这个例子中，我们使用 import() 函数加载了一个名为 module.js 的模块。当加载完成后，我们可以在 then 方法中获取到这个模块，并进行一些操作。如果加载失败，则会进入 catch 方法中，我们可以在这里处理错误。
需要注意的是，import() 函数返回的是一个 Promise 对象。如果加载成功，则 Promise 对象会 resolve 并返回加载的模块；如果加载失败，则 Promise 对象会 reject 并返回一个错误对象。
动态导入的使用场景
动态导入的使用场景非常广泛，特别是在 Web 应用中。下面列举了一些常见的情况：
按需加载模块
在 Web 应用中，我们通常会把所有的 JavaScript 代码都打包成一个或多个文件，然后在页面加载时一次性加载。这样虽然方便，但也会导致页面加载速度变慢，特别是当文件较大时。
使用动态导入可以解决这个问题。我们可以把一些不必要的模块延迟加载，只有当需要使用时才进行加载。比如，我们可以在页面滚动到某个位置时，再加载一些与这个位置相关的模块。这样可以减少页面加载时间，提高用户体验。
加载第三方模块
有些 JavaScript 库或框架可能会依赖于一些第三方模块，这些模块可能不是必需的，而且也比较大。如果一开始就把这些模块全部加载进来，可能会影响应用性能。
使用动态导入可以解决这个问题。我们可以延迟加载这些第三方模块，只有在需要使用时才进行加载。这样可以减少初始加载时间，提高应用性能。
加载国际化模块
在多语言 Web 应用中，我们通常会使用国际化模块来管理各种语言版本的字符串。这些模块可能会包含大量的字符串，如果一开始就加载所有的语言版本，可能会导致页面加载时间变慢。
使用动态导入可以解决这个问题。我们可以延迟加载这些国际化模块，只有在用户需要切换语言时才进行加载。这样可以减少初始加载时间，提高应用性能。
动态导入的示例代码
下面是一个简单的示例代码，演示了如何使用动态导入加载一个名为 module.js 的模块：
// javascriptcn.com 代码示例
// index.js
const button = document.querySelector('button');
button.addEventListener('click', async () => {
const module = await import('./module.js');
module.doSomething();
});
// module.js
export function doSomething() {
console.log('Hello, world!');
}在这个例子中，当用户点击按钮时，我们使用 import() 函数加载了一个名为 module.js 的模块。当加载完成后，我们调用了这个模块中的 doSomething 函数，输出了一个字符串。
需要注意的是，在这个例子中，我们使用了 async/await 语法来等待模块的加载完成。如果不使用 async/await，则需要使用 Promise 的 then 方法来获取模块。
总结
动态导入是 ECMAScript 2021 中一个非常重要的特性，它可以让我们在运行时动态地加载 JavaScript 模块，而不需要在编译时就把所有的依赖都加载进来。这样可以显著地提高应用的性能，特别是在 Web 应用中。在实际开发中，我们可以根据需要使用动态导入来按需加载模块、加载第三方模块和加载国际化模块等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655078387d4982a6eb94c4cf