ES9 中引入了一种新的导入方式，即 import() 函数。该函数可以异步导入模块，提高了应用的性能和灵活性。
为什么需要异步导入？
Web 应用通常需要加载大量的 JavaScript 文件，这些文件中包含了许多模块。当这些模块被依赖于主模块时，就需要在网页加载时将它们全部加载完毕。如果这些文件过多或文件过大，就会导致网页加载慢的问题。
因此，优化 Web 应用的性能就需要采用异步加载的方式来导入模块。
import() 函数的使用方法
import() 函数可以通过 Promise 对象解决异步加载问题，它的语法如下：
import(moduleName)
.then((module) => {
// 模块加载成功
})
.catch((err) => {
// 模块加载失败
});其中，moduleName 是需要导入的模块的文件路径，可以是相对路径或绝对路径。这个函数返回的是 Promise 对象，使用 Promise 的 then() 方法可以获取到导入的模块。
异步导入可以解决什么问题？
异步导入可以解决 Web 应用在加载 JavaScript 文件时出现的性能问题。通过 import() 函数异步导入模块，可以在需要此模块时再进行加载，减少首次加载时间，提高了应用的性能。
同时，异步导入也可以实现代码分离和资源延迟加载，提高 Web 应用的灵活性。
实例应用
我们来看一个简单的实例：通过异步导入模块并实现数据请求。
我们有两个模块，一个是用于请求数据的模块 getData.js，另一个是用于显示数据的模块 showData.js，现在我们需要在主模块导入它们并实现数据请求。
首先，我们需要导入 getData.js 模块。我们可以使用传统的静态导入方式，也可以使用 import() 函数异步导入：
-- -------------------- ---- -------
-- ----
------ - ------- - ---- ------------
-- ----
-------------------
-------------- -- -
----- - ------- - - -------
----------
--
------------ -- -
-----------------
---如果我们需要在异步导入后再导入 showData.js 模块，也是同样的方式：
import('./showData')
.then((module) => {
const { showData } = module;
// 调用 showData 函数
})
.catch((err) => {
console.log(err);
});这样，我们就成功地实现了异步导入模块并请求数据的任务。
指导意义
通过 import() 函数进行异步导入模块，能够提高 Web 应用的性能和灵活性，并实现代码分离和资源延迟加载。这种方式已经被许多 Web 应用所采用。
在 Web 应用中，我们应该尽可能地使用异步导入方式，避免出现加载过多或过大的 JavaScript 文件导致网页加载慢的问题。同时，异步导入也可以帮助我们实现代码分离，提高应用的灵活性。
总结
ES9 中的 import() 函数可以帮助我们异步导入模块，提高 Web 应用的性能和灵活性，并实现代码分离和资源懒加载。在 Web 应用中，我们应该尽可能地采用异步导入模块的方式，避免加载过多或过大的 JavaScript 文件导致网页加载缓慢的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648b832948841e98949d52e4