Web 应用日益复杂，对前端性能要求也越来越高，因此异步加载成为了不可或缺的一环。在 ES6标准 中，通过 import 语法进行模块加载的时候，只能在模块的顶层使用，无法动态加载模块。而在ES11中加入的 import() 和 await 语法糖，可以轻松实现异步模块加载，同时也给开发者提供了更多灵活的动态加载方式。
import()实现异步模块加载
使用 import() 函数可以实现异步模块加载，其语法为：
import('module_path')
.then(module => {
// 这里处理加载成功后的逻辑
})
.catch(err => {
// 这里处理加载失败后的逻辑
});import() 函数返回的是一个 Promise 对象，当模块加载成功后，会返回一个包含该模块导出对象的模块对象。而 catch() 则是用于捕捉加载失败时的异常，开发者可以在其中处理加载失败的情况。
这样，我们就可以再需要时才去加载模块，而在不需要的情况下，就可以降低加载模块对应用启动的影响，提高应用的启动速度。
await 实现更加简洁的异步模块加载
使用 import() 加载模块时，也可以使用 ES7 引入的 async/await语法糖，实现更加简洁的异步模块加载。
async function loadModule(modulePath) {
try {
const module = await import(modulePath);
// 这里处理加载成功后的逻辑
} catch (err) {
// 这里处理加载失败后的逻辑
}
}使用 async/await 语法糖，可以将异步代码写成同步风格的代码，从而更加易读易懂。在异步加载模块时，使用 await 会阻塞后续代码的执行，直到模块加载成功或加载失败为止。
示例代码
以下是一段使用 import() 和 await 实现异步模块加载的示例代码。
-- -------------------- ---- -------
----- -------- ------------------------------ -
--- -
----- ------ - ----- -------------------
-- ----------
-------------------------------
- ----- ----- -
-- ----------
-------------------
-
-
----------------------------------------------- -- -- ------ --在以上示例代码中，我们通过 import() 加载了一个外部模块 lodash，使用 await 实现了异步加载，当然也可以使用 then/catch方式来实现异步加载。在 loadExternalModule 函数中，可以在加载成功后使用 lodash 模块。需要注意的是， import() 函数只能用于加载ES6模块，所以我们需要保证被加载的模块是 ES6 模块。
总结
通过 ES11 标准中的 import() 和 await 语法糖，我们可以轻松实现异步模块加载。这些新特性可以帮助我们在减少启动时间、优化性能方面提供更多选择，同时也让异步模块加载变得更加简单易懂。在实际开发中，建议适当使用 import() 和 await 语法糖来进行模块加载，提升应用性能和用户体验，从而实现更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e459b3f6b2d6eab3fbd977