JavaScript 是一种动态语言，允许在代码运行时进行代码加载和调用。ES6 引入了 import/export 语法，允许在模块加载时预先声明要使用的模块。ES2020 引入了动态 import() 和 await import() 语法，允许在运行时根据需要加载模块。本文将介绍这两种语法的用法和用途。
动态 import() 的用法
动态 import() 方法允许在代码执行过程中异步加载模块。它返回一个 Promise 对象，当模块加载完成后，该 Promise 将被解决，并且可以访问该模块的导出。
下面是一个简单的示例：
async function loadModule() {
const myModule = await import('./myModule.js');
myModule.doSomething();
}
loadModule();在这个示例中，我们定义了一个异步函数 loadModule()，它通过 import() 方法加载 myModule.js 模块。在 import() 方法解决了 Promise 之后，我们可以访问 myModule 对象，并调用其中的方法 doSomething()。
需要注意的是，import() 方法只能在模块中使用，不能在全局范围内使用。如果你需要在全局范围内加载模块，可以使用动态创建标签的方式加载。
-- -------------------- ---- -------
-------- --------------- -
------ --- ----------------- ------- -- -
----- ------ - ---------------------------------
---------- - ----
------------- - --------
-------------- - -------
----------------------------------
---
-
----- -------- ------------ -
----- ----------------------------
----- -------- - ----------------
-----------------------
-
-------------在这个示例中，我们定义了一个 loadScript() 函数，该函数通过动态创建 script 标签加载 myModule.js 脚本。在脚本加载完成后，我们可以通过 window.myModule 访问 myModule 对象，并调用其中的方法 doSomething()。
await import() 的用法
await import() 语法是动态 import() 方法的异步化版本。它允许在异步函数中加载模块，而无需使用 Promise 的 then() 方法。
下面是一个简单的示例：
async function loadModule() {
const myModule = await import('./myModule.js');
myModule.doSomething();
}
loadModule();在这个示例中，我们定义了一个异步函数 loadModule()，它通过 await import() 方法加载 myModule.js 模块。在 import() 方法解决了 Promise 之后，我们可以访问 myModule 对象，并调用其中的方法 doSomething()。
需要注意的是，await import() 语法只能在异步函数中使用。
动态 import() 的指导意义
动态 import() 方法允许我们在需要时异步加载模块。这对于模块拆分和性能优化非常有帮助。
我们可以将一个大型的模块拆分成多个小模块，然后在需要时动态加载它们。这可以减小初始加载时的数据量，从而提高页面加载速度和性能。
另外，动态 import() 方法还允许我们根据需要加载不同的代码路径。这对于构建基于条件的代码分支非常有用。例如，可以在移动设备上加载适用于移动设备的代码版本，而在桌面设备上加载适用于桌面设备的代码版本。
结论
ES2020 引入的动态 import() 和 await import() 语法允许我们在运行时动态加载模块。这对于模块拆分和性能优化非常有帮助。我们可以根据需要异步加载模块，在需要时减小初始加载时的数据量，提高页面加载速度和性能。同时，这些语法还允许我们根据需要加载不同的代码路径，以支持基于条件的代码分支。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775fd396d66e0f9aa085561