ES10中新增了动态 import() 方法，允许在运行时动态地加载 JavaScript 模块。在以往，为了实现异步加载模块，我们常常需要借助你异步加载器库以实现主流程执行后再加载。但是现在，我们可以使用原生的 JavaScript import() 方法来解决异步加载模块的问题。
如何使用动态 import()
使用动态 import() 方法，可以很容易地实现模块化加载，具体示例如下：
// 加载模块
import('/modules/my-module.js')
.then((module) => {
// 使用模块
// module.doSomething()
});在示例中，我们使用 import() 方法加载了一个模块，然后可以使用返回的模块对象执行指定操作。需要注意的是，import() 方法返回的是 Promise 实例，需要通过 then() 方法来获取加载完成后的模块对象。
动态 import() 与静态 import 的区别
静态 import 是一种在模块内部加载其他模块的方式，而动态 import() 则是一种在运行时、按需加载模块的方式。
静态 import 必须在代码文件中预定义，而动态 import() 允许你建立一个基于运行时条件的代码分支，可以决定是否应该加载一个模块。
-- -------------------- ---- -------
-- ----
------ - ---------- - ---- ------------------------
-- ----
-- ----------- -
-------------------------------
-------------- -- -
--------------------
---
-动态 import() 的优点
- 代码分离和资源优化：通过动态
import()，可以使项目上线后的首屏加载速度加速，在后续的页面用到时候再加载所需要的组件。 - 按需加载和架构优化：动态
import()可以根据不同页面的需要，按需加载所需的组件，从而减轻服务器的压力，提升性能。 - 更加灵活: 动态
import()允许在运行时，按需加载模块，增加代码的灵活性。
动态 import() 的注意事项
- 目前无法在顶层作用域使用动态
import()，只能在函数内部使用。 - 使用动态
import()加载的模块，其模块对象默认没有导出，需要通过.default属性来访问模块对象。 - 动态
import()方法目前主要在 Chrome 和 Opera 浏览器中支持，其他浏览器可以使用 Babel 编译器来使用该功能。
示例代码：
-- -------------------- ---- ------- -- ------ -- --------------------- ------ ------- -------- ------------ - ------------------ -------- - -- ---- ----- -------- ------------ - ----- ------ - ----- -------------------------------- ------ --------------- - -- ---- ------------------------------ -- - ------------- ---
总结
ES10 新增的动态 import() 方法，提供了一种新的、高效的方式来加载 JavaScript 模块。它可以帮助我们实现代码的分离、资源优化和按需加载等功能，提升网站的性能和用户体验。使用动态 import() 方法需要注意一些细节问题，但是掌握了这个技术后，我们可以使用更加灵活的方案来优化我们的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f61b61f6b2d6eab3ec3ace