在过去几个版本的 ECMAScript 中，JavaScript 开发者们已经大量使用了模块化编程，以便于更好地组织代码并实现可重用性。ES6 中引入了模块化编程的概念，但是随着应用程序的规模不断增长，模块的数量和大小也会随之增加，应用程序的性能和加载速度就会受到负面的影响。为了解决这个问题，ECMAScript 2021 引入了 import() 这个 API，允许开发者更加灵活地加载和执行模块代码。
动态加载模块的基础语法
使用 import() 来动态加载模块的基础语法如下：
import(moduleName)
.then((module) => {
// do something with module
})
.catch((error) => {
// handle error
});其中 moduleName 表示要加载的模块路径，这个路径可以是相对路径或绝对路径。返回值是一个 Promise，它会在指定的模块载入完成后被解析，并且该模块的导出对象将作为其解析结果。在 .then() 中，你可以访问到加载的模块对象，然后可以使用它来执行相应的操作。 如果加载模块时出现错误，.catch() 将会捕获错误并显示错误信息。
动态加载模块的作用和使用场景
动态加载模块的作用和使用场景如下：
- 懒加载：只有在需要时才加载模块，从而提高应用程序的加载速度并节省内存空间；
- 动态加载：根据条件动态加载模块，从而可以实现更加灵活的开发；
- 模块分块：按需加载模块，从而减小应用程序的体积。
示例代码
现在，我们来看一个示例代码，模拟加载两个模块并使用它们。首先，创建两个模块文件 module1.js 和 module2.js，分别用于导出 sum() 和 product() 两个函数。
// module1.js
export function sum(a, b) {
return a + b;
}// module2.js
export function product(a, b) {
return a * b;
}接下来，在主文件中使用 import() 加载这两个模块，并执行它们的方法。
-- -------------------- ---- -------
-- ------
----------------------
--------------- -- -
-------------------------- ----
--
-------------- -- -
--------------------- ------- ------ -- -------
---
----------------------
--------------- -- -
------------------------------ ----
--
-------------- -- -
--------------------- ------- ------ -- -------
---上述代码中，我们通过 import() 命令动态加载 module1.js 和 module2.js 两个模块，并在 .then() 回调函数中使用它们的方法。如果加载模块时出现错误，则会被 .错误() 回调函数捕获并显示错误信息。
总结
ECMAScript 2021 引入了 import() 这个 API，允许开发者更加灵活地加载和执行模块代码，解决了过多和过大的模块会带来的应用程序加载和性能的问题。动态加载模块不仅可以实现懒加载和动态加载，也可以实现模块分块，从而减小应用程序的体积。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ccaeda5ad90b6d042a95fe