在 ECMAScript 2019 中，引入了一种新的模块加载方式：import() 方法。这种方式可以让开发者在运行时动态地加载 JavaScript 模块，从而实现更加灵活的代码组织和资源管理。
import() 方法的基本使用
import() 方法是一个异步函数，它接受一个参数：模块的路径。当调用 import() 方法时，会返回一个 Promise 对象，这个 Promise 对象会在模块加载完成后被 resolve，resolve 的值是一个包含了模块导出对象的对象。
下面是一个简单的示例代码：
async function loadModule() {
const module = await import('./module.js');
module.doSomething();
}
loadModule();在这个示例中，我们定义了一个异步函数 loadModule()，它通过 import() 方法异步地加载了一个名为 module.js 的模块。当模块加载完成后，我们可以通过返回的模块对象调用其中的方法 doSomething()。
import() 方法的高级用法
import() 方法不仅仅可以用于简单地加载一个模块，它还可以用于实现更加复杂的场景。
动态加载模块
import() 方法可以接受任何表达式作为参数，这意味着我们可以动态地构造模块路径。这种方式可以在运行时根据不同的条件加载不同的模块，从而实现更加灵活的代码组织。
下面是一个示例代码：
async function loadModule() {
const moduleType = 'foo';
const module = await import(`./${moduleType}.js`);
module.doSomething();
}
loadModule();在这个示例中，我们定义了一个变量 moduleType，它的值为 'foo'。然后我们使用模板字符串构造了一个动态的模块路径，最终加载了一个名为 foo.js 的模块。
延迟加载模块
import() 方法可以在需要时才加载模块，而不是在代码运行时就加载所有的模块。这种方式可以提高应用程序的性能和响应速度。
下面是一个示例代码：
-- -------------------- ---- -------
--- -------
----- -------- ------------ -
-- --------- -
------ - ----- ----------------------
-
---------------------
-
-------------在这个示例中，我们定义了一个全局变量 module，它用来缓存已经加载过的模块。在 loadModule() 函数中，我们首先检查模块是否已经被加载，如果没有被加载，我们就通过 import() 方法异步地加载模块。这样做可以保证模块只会被加载一次，从而提高应用程序的性能。
import() 方法的注意事项
虽然 import() 方法提供了更加灵活的模块加载方式，但是在使用时需要注意一些问题。
import() 方法只能在模块代码中使用
import() 方法只能在模块代码中使用，不能在全局作用域中使用。这是因为 import() 方法需要依赖模块系统的实现，而全局作用域中没有模块系统的概念。
import() 方法只能用于静态模块
import() 方法只能用于静态模块，不能用于动态模块。这是因为 import() 方法是一个异步函数，它需要在运行时才能加载模块，而动态模块的路径是在运行时才能确定的，无法在编译时确定。
总结
import() 方法是 ECMAScript 2019 中引入的一种新的模块加载方式，它可以让开发者在运行时动态地加载 JavaScript 模块，从而实现更加灵活的代码组织和资源管理。在使用 import() 方法时需要注意一些问题，例如只能在模块代码中使用，只能用于静态模块等。掌握 import() 方法的使用方法和注意事项，可以帮助开发者更加高效地编写 JavaScript 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f1bfc22b3ccec22fa4f876