随着前端技术的不断发展，JavaScript 也在不断地更新迭代。ES12 中新增的 import() 动态导入功能，可以帮助我们更好地组织和管理代码，提高代码的可维护性和可读性。本文将详细介绍 import() 的使用方法，并给出示例代码。
什么是 import() 动态导入
ES6 中的静态导入是指在编译时就确定了需要导入的模块，而 import() 动态导入则是在运行时根据需要动态加载模块。
动态导入的语法如下：
import(moduleName)
.then(module => {
// 使用 module 中的内容
})
.catch(error => {
// 处理错误
});其中，moduleName 是一个字符串，表示需要动态加载的模块的路径。import() 返回一个 Promise 对象，可以通过 .then() 方法获取加载后的模块，也可以通过 .catch() 方法处理加载错误。
import() 的优势
使用 import() 动态导入可以带来以下优势：
- 模块按需加载，提高页面加载速度和性能。
- 可以根据需要动态加载模块，减少不必要的代码加载和执行。
- 更好地组织和管理代码，提高代码的可维护性和可读性。
import() 的使用方法
下面我们来看一个实际的示例，演示如何使用 import() 动态导入模块。
假设我们有一个模块 utils.js，定义了一个 sum 函数：
export function sum(a, b) {
return a + b;
}现在我们需要在另一个模块中使用 sum 函数，但是由于这个模块很大，我们不希望在页面加载时就把整个模块都加载进来。这时，就可以使用 import() 动态导入模块：
-- -------------------- ---- -------
-- ----- --- ---------- ----- --
--------------------
------------ -- -
----- ------ - ------------- ---
-------------------- -- -
--
------------ -- -
-------------------
---可以看到，我们使用了 import() 动态导入 utils.js 模块，在 Promise 的 then 方法中获取了模块中的 sum 函数，并使用它计算了 1 和 2 的和。
需要注意的是，在动态导入模块时，moduleName 的值必须是一个字符串常量，不能是变量或表达式。
import() 的兼容性
目前，import() 动态导入的兼容性还不太好，需要使用 Babel 进行转换。如果你使用的是 webpack，可以使用 @babel/plugin-syntax-dynamic-import 插件进行转换。
总结
本文详细介绍了 ES12 中的 import() 动态导入的使用方法，并给出了示例代码。使用 import() 动态导入可以提高页面加载速度和性能，更好地组织和管理代码，提高代码的可维护性和可读性。需要注意的是，import() 的兼容性还不太好，需要使用 Babel 进行转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663b568ed3423812e4954f48