ECMAScript 2020 的新特性：import() 替代 require() 动态加载模块
在 JavaScript 中，我们经常使用 require() 函数来导入模块，这是 CommonJS 规范中定义的方式，但是在 ECMAScript 2020 中，我们也可以使用 import() 函数来动态加载模块。
import() 函数不仅有更好的性能，而且还能够实现动态加载模块的功能，这种模块加载方式可以让我们更加方便地实现按需加载，提高了程序的整体性能。
在本文中，我们将会介绍 ECMAScript 2020 的新特性：import() 替代 require() 动态加载模块，并为您演示如何使用它们。
什么是 import()？
import() 是 ECMAScript 2020 中的一个新特性，它是一个函数，可以用来动态地加载模块。相比于 require()，它更加灵活，并且可以更好地满足我们的需求。
import() 中可以使用 Promise，这就意味着我们可以通过 Promise 的方式来处理模块加载成功或失败的情况，这让我们在使用时可以更加灵活和方便。
使用 import() 加载模块的方法有两种：
第一种方式是使用默认语法：
import('/modules/my-module.js')
.then((module) => {
// 处理模块
})
.catch((err) => {
// 处理错误
});第二种方式是使用命名语法：
import { myExport } from '/modules/my-module.js';对比两种加载方式，我们可以看到，使用默认语法时，我们需要明确地指定要加载的文件；使用命名语法时，我们需要指定要加载的具体变量或函数。
使用 import() 动态加载模块有哪些好处？
替代 require()
当我们在使用 require() 函数时，它会在代码被解释执行时自动进行模块的加载，并将导出的对象分配给指定的变量或常量。而当我们使用 import() 函数时，它只是一个异步函数，它返回一个 Promise 对象，我们可以通过 Promise 来处理模块加载所耗费的时间。
动态加载模块
使用 import() 函数可以让我们动态地加载模块，这意味着我们可以按需加载模块。在一些复杂的场景中，我们可以先加载必要的模块，然后在需要的时候再动态加载其他的模块，这样可以帮助我们更好地管理和控制程序的性能。
使用示例
在下面的示例中，我们将展示使用 import() 函数动态地加载模块的方法。首先是使用默认语法的示例：
-- -------------------- ---- -------
----- ------ - ---------------------------------
-------------------------------- -- -- -
-------------------------------
-------------- -- -
-- ----
-------------------------------
--
------------ -- -
-- ----
-----------------
---
---接下来，是使用命名语法的示例：
import { myExport } from '/modules/my-module.js';
console.log(myExport);在这个示例中，我们只导入了指定的 myExport 变量，其他导出的内容不会被加载。
结论
使用 import() 函数，我们可以更加方便地动态加载模块，实现按需加载，提高程序性能和可扩展性。如果您还在使用 require()，那么现在就是时候开始尝试使用 import() 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d4a90a336082f254ba908