在前端开发中，我们经常需要加载各种模块来实现不同的功能。ES6 中的模块化已经让我们的开发变得更为轻松和方便，但是在实际开发中，我们仍然需要不断地优化我们的加载和启动时间。此时，Dynamic Import 动态加载模块的技术就出现了。
什么是 Dynamic Import 动态加载模块？
Dynamic Import 动态加载模块是 ES2020 草案中的新特性，它可以在运行时动态加载模块。之前我们只能使用静态导入，如：
import {xxx} from './module.js';而 Dynamic Import 允许你在代码运行时导入模块:
(async function() {
const module = await import('./module.js');
const xxx = module.w;
console.log(xxx);
})();可以看到，我们使用了 async 和 await，用来支持异步导入。当代码运行到 import 时，它会在后台开始下载模块，然后等到下载完毕后执行代码。这种方式可以让我们更加灵活地加载模块，根据需求来选择加载哪些模块。
在实践中如何使用 Dynamic Import 动态加载模块？
我们可以将 Dynamic Import 动态加载模块用于需要在某些情况下才加载的场景中，例如某些功能只有在用户触发后才需要使用，那么我们可以在需要用到该功能时再加载相应的模块。
例如，我们在开发一个 SPA（单页面应用），在页面首次加载时，我们只需要加载必要的模块，而某些组件的代码可以在某个事件触发后再进行下载和加载：
-- -------------------- ---- -------
----- -------- ------------------- -
----- --------- -------- - ----- -------------
-----------------------
----------------------
---
-- -- --------- ---- ------- --- -------
-
-----------------------------------
-------------------------- -------------------上面的代码中，当按钮被点击时，我们会动态加载并解析模块A和模块B。这种方式可以让我们的应用程序变得更加高效和快速，因为只有当需要使用某些模块时才会去加载它们。
Dynamic Import 动态加载模块的注意事项
虽然使用 Dynamic Import 动态加载模块能够让我们更加灵活地加载模块，但这种技术并不是所有场景下的最佳选择，使用 Dynamic Import 动态加载也有一些注意点。
动态导入的语法是import()，而非import ... from ...
Dynamic Import 动态加载模块的语法是通过关键字 import() 进行调用，而不是使用关键字 import ... from ... 进行静态导入。
Promise.all 和 await
当需要同时加载多个模块时，可以使用 Promise.all 提高多个模块加载的效率。此外，也可以使用 await 关键字在加载模块时等待模块的加载完成，然后再进行后续操作。
Dynamic Import 不适用于循环导入
Dynamic Import 不适用于循环导入的场景。在使用循环导入时需要特别注意，否则可能会带来一些难以预料的问题。
总结
Dynamic Import 动态加载模块是 ES2020 草案中的新特性，它提供了一种动态加载模块的方式，可以让我们更加灵活地加载模块，根据需求来选择加载哪些模块。在某些场景下，使用 Dynamic Import 动态加载模块可以帮助我们提高应用程序的运行效率和加载速度。
-- -------------------- ---- -------
-- -----
----- -------- ------------------- -
----- --------- -------- - ----- -------------
-----------------------
----------------------
---
-- -- --------- ---- ------- --- -------
-
-----------------------------------
-------------------------- -------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cdb5cd1519ea946c18454b