在前端开发中，我们常常需要引入外部模块，比如常用的 Vue 和 React，ES6 中的模块机制使得模块引入变得更加简单。但是，ES6 中的静态引入存在着一些问题，比如不能动态引入、不能按需加载等。为了解决这些问题，ES11 引入了 Dynamic Import 和 import()，这篇文章将会深入探讨它们的区别。
Dynamic Import
Dynamic Import 是 ES11 中新增的一个语法，它允许我们在运行时动态地引入模块。这意味着我们可以根据需要，按需加载模块，有助于更好地优化性能。Dynamic Import 在语法上采用了 Promise 对象的形式。
const modulePath = './module.js';
const myFunc = async () => {
const myModule = await import(modulePath);
myModule.default();
};
myFunc();上述代码中，我们使用了 Dynamic Import 引入了一个名为 module.js 的模块。注意，import() 返回的是一个 Promise，我们可以使用 async/await 对其进行操作。
import()
import() 与 Dynamic Import 语法相似，它也可以在运行时动态地引入模块，但是在语法上有所不同。它不是一个关键字，而是一个方法，其接收一个字符串参数，返回一个 Promise 对象。
const modulePath = './module.js';
const myFunc = async () => {
const myModule = await import(modulePath);
myModule.default();
};
myFunc();上述代码使用了 import() 引入了一个名为 module.js 的模块，代码与 Dynamic Import 的代码完全一致。只是使用了 import() 方法而已。
区别
在实际使用中，Dynamic Import 与 import() 有什么区别呢？主要是在语法上和模块导出的方式上。
语法
Dynamic Import 与 import() 在语法上有些许不同，Dynamic Import 采用的是 await import() 的形式，而 import() 是一个方法。这导致在使用上，Dynamic Import 不需要额外添加函数调用符 ()，而 import() 需要。
模块导出方式
Dynamic Import 与 import() 在模块导出的方式上也有些许不同。在模块导出时，如果我们使用了 Dynamic Import，模块将按需加载；而如果我们直接在模块中使用 import() 导出，模块将在引入时立即加载。
以下是一个例子，其中 moduleA.js 模块使用 import() 导出，moduleB.js 模块使用 Dynamic Import 导出。
-- -------------------- ---- ------- -- ---------- ------ ------- - ----- ---------- -- -------------------- --------- -- ---------- ------ ------- ----- ---------- - ----- ------- - ----- ----------------------- ---------------------------------- -------------------- --------- --
在上述代码中，我们可以发现，在 moduleA.js 中，我们导出了一个对象，并在控制台输出了 'moduleA loaded'，而在 moduleB.js 中，我们使用了 Dynamic Import 引入了 moduleA.js，并使用了 await 关键字等待它的加载。当我们调用 moduleB() 方法时，'moduleA loaded' 没有被输出，直到 await import() 语句到达时才会输出。这说明了 Dynamic Import 是一个按需加载，而 import() 则是立即加载。
总结
Dynamic Import 和 import() 都是 ES11 中新增的语法，它们可以动态地引入模块，有助于更好地优化性能。Dynamic Import 采用了 await import() 的形式，不需要添加函数调用符 ()；而 import() 则是一个方法，在引入时立即加载模块。平时我们可以根据需要选择采用不同的方式来引入模块，有助于提高应用性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6594d509eb4cecbf2d91796d