随着前端技术的发展，模块化已成为前端开发中不可或缺的一部分，而 ES6 中引入的模块化语法已经为我们提供了便捷的模块化方式。但是在某些场景下，我们希望根据条件动态加载模块，这个时候就需要用到 ES9 中引入的 import() 函数。
什么是 import() 函数
import() 函数是 ES9 引入的一个新特性，它允许我们在运行时根据需要动态加载模块，而不是在编译时就确定加载的模块。
具体来说，import() 函数返回一个 Promise 对象，该 Promise 对象在模块加载完成后会被 resolve，从而我们可以使用该模块导出的内容。
import() 函数的使用方法
import() 函数有两种基本的使用方式：
- 使用 import() 函数作为异步函数的参数
async function doSomething() {
const module = await import('./module.js');
module.default.someMethod();
}该代码片段中，import() 函数作为 async 函数的参数，返回一个 Promise 对象，然后我们使用 await 关键字等待 Promise 对象的解析，再使用返回的模块中的导出的内容。
需要注意的是，在上面的示例中，我们使用了 ES6 的默认导出，所以我们需要使用 module.default 来访问默认导出的内容。
- 使用 import() 函数作为动态 import 的标准语法
import('./module.js')
.then(module => {
module.default.someMethod();
});该代码片段中，我们直接使用 import() 函数动态导入模块，并在 Promise 对象的 then 方法中使用模块导出的内容。
import() 函数的优势
使用 import() 函数可以带来许多优势，尤其在以下场景中：
延迟加载模块，如果在应用的某个时点之前不需要加载模块，那么在该时点之前就不会加载模块，这对于大型应用程序的性能至关重要。
根据条件加载模块，例如在特定页面上加载特定模块，而不是在应用程序的每个页面上都加载所有模块。
动态加载第三方库，例如在用户在应用程序中执行特定操作后，加载第三方库以进行某些操作或完成某些功能。
import() 函数的实践应用
延迟加载模块
const button = document.getElementById('button');
button.addEventListener('click', async () => {
const module = await import('./module.js');
module.default.someMethod();
});在这个例子中，我们在按钮点击事件中使用了 import() 函数，这样在页面加载时就不会加载模块，只有在按钮被点击后才会加载模块，并执行 someMethod() 方法。
根据条件加载模块
-- -------------------- ---- -------
----- ----------- - ---------------------------
-- ------------ --- ----------- -
----------------------
------------ -- -
----------------------------
---
- ---- -- ------------ --- ----------- -
----------------------
------------ -- -
----------------------------
---
-在这个例子中，根据当前页面的路径，我们使用了不同的模块，在特定页面上加载特定模块，而不是在应用程序的每个页面上都加载所有模块。
动态加载第三方库
const button = document.getElementById('button');
button.addEventListener('click', async () => {
const $ = await import('jquery');
$(button).addClass('active');
});在这个例子中，我们在按钮点击事件中使用了 import() 函数来动态加载 jQuery 库，在用户点击按钮后才会加载该库，从而避免了在页面加载时加载大量 JavaScript 代码。
总结
import() 函数是 ES9 中引入的一项新特性，它允许我们在运行时根据需要动态加载模块。它使得我们能够延迟加载模块、根据条件加载模块，并动态加载第三方库，从而大大提高了性能和灵活性。在实际应用中，我们应该根据具体场景使用 import() 函数，加快应用程序的加载速度，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c4c52583d39b488183264d