ECMAScript 2020 (ES11) 中引入了一个新的功能：Dynamic Import(动态导入)。它允许我们在代码运行时动态地导入一个模块。这个功能的引入使得前端开发更加灵活，同时也提高了应用程序的性能。
Dynamic Import 的语法
在 ECMAScript 2020 (ES11) 中，我们可以使用 import() 函数来动态导入一个模块。import() 函数可以被看做是一个异步函数，它会返回一个 Promise 对象，Promise 对象的 resolve 值是一个对象，包含了导入的模块的所有导出值。
import() 函数的基本语法如下：
import('<module>')
.then((module) => {
// use module
})
.catch((error) => {
// handle error
});其中，<module> 是一个字符串，表示要加载的模块的路径。注意，<module> 的路径是相对路径或绝对路径。
Dynamic Import 的使用
在实际的开发过程中，Dynamic Import 的使用非常灵活。比如，我们可以在需要时动态导入一个模块。也就是说，我们可以将一些不常用的模块放在单独的文件中，只有在需要的时候才加载它们，从而避免了不必要的网络请求和资源消耗。
我们还可以根据用户的行为动态导入模块。比如，在用户点击某个按钮时，在导入模块前先检查是否已经导入过该模块，如果已经导入过，则直接使用缓存中的模块；如果没有导入过，则动态地导入该模块。
Dynamic Import 还可以用于代码分割。我们可以根据应用程序的需求将代码划分为多个模块，并在需要时动态导入这些模块。这样做可以大大减小页面和脚本的加载时间，提高应用程序的性能。
下面是一个动态导入模块的示例代码：
const button = document.getElementById('my-button');
button.addEventListener('click', async () => {
const module = await import('./my-module.js');
module.default.run();
});在上面的代码中，我们首先获取一个按钮元素，然后在按钮的 click 事件中动态导入了一个名为 my-module.js 的模块。当模块导入完成后，我们使用 default 属性获取该模块的默认导出，并调用它的 run() 方法。注意，这里的 import() 函数是一个异步函数，我们需要使用 async/await 语法来处理它的返回值。
总结
ECMAScript 2020 (ES11) 中的 Dynamic Import(动态导入) 是一个非常有用的功能，它使得前端开发更加灵活，同时也提高了应用程序的性能。我们可以利用动态导入来优化应用程序的加载和运行效率，实现代码的分割、按需加载等功能。掌握 Dynamic Import 的使用，对于我们的前端开发工作具有重要的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6474f689968c7c53b022ac8d