在早期的 ECMAScript 规范中，我们只能使用静态导入语法(import)来引入模块，这使得我们无法根据条件在运行时选择是否导入，也无法根据异步请求的结果来动态加载模块，这对于一些需要延迟加载的模块的情况会造成很大的开销。
而在 ES12 中，新引入了 import() 动态导入语法，能够显著提升代码的灵活度和性能，这一篇文章将向大家介绍 import() 动态导入语法的优势以及使用场景并提供示例代码。
什么是 import() 动态导入语法？
import() 是 ES12 中的一个新特性，它可以让我们在运行时动态加载一个模块。该语法是一个函数，其参数为一个包含模块路径的字符串，返回一个 Promise 对象，其值为该模块导出的对象。
以前我们只能这样引入模块：
import { module } from './example.js'; 而现在我们可以这样进行动态导入：
const modulePromise = import('./example.js');import() 的优势
动态导入模块：早期的模块导入只能在模块顶部（静态）定义到处，无法在运行时根据条件判断导入，而 import() 动态导入语法可以在运行时动态加载模块，这使得我们可以延迟加载模块和选择性加载模块，这对于性能优化和代码灵活性的提升至关重要。
减少性能浪费：使用 import() 可以减少启动时要加载的模块文件的数量，可以让我们的应用在启动时加载非常少的代码，以加快应用的启动时间。
异步加载模块：import() 返回的是 Promise，我们可以使用 async/await 语法糖来完成模块的异步加载，在等待模块加载完成之前我们的程序可以继续执行其他的任务，使得我们的程序更加高效。
import() 的使用场景
- 条件加载模块：import() 的动态导入语法允许我们在运行时根据条件选择性地加载一个或多个模块，这使得我们可以根据不同的情况加载不同的代码，从而让我们的代码更加灵活和高效。
下面是一个根据用户选择加载相应模块的示例：
let user = 'default';
if (condition) {
user = 'admin';
}
const { data } = await import(`../src/${user}.js`);- 延迟加载模块：有些模块在我们启动应用时并不需要一次性全部加载，这时我们可以使用 import() 技术来延迟加载，节省启动成本。
下面是一个延迟加载图片库的示例：
-- -------------------- ---- ------- ----- -------- ----------- - ----- ------ - ----- ----------------------------- ----- ----- - --------------- ----- --- - --- -------- ------- - ----------------- ---------- - -- -- - ------------------------------- - -
总结
本文简要介绍了 import() 动态导入语法的优势和使用场景，重点在于强调了该语法可以让我们的代码更加灵活和高效。我们可以在运行时动态加载模块，延迟加载模块和选择性加载模块，这样可以避免不必要的性能浪费并且提高代码的质量。同时，希望本文的内容可以为大家更好的理解 ES12 中的 import() 带来一些指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa202848841e989464b268