介绍
ES11 中引入了一个新的特性：Dynamic Import（动态导入）。动态导入允许我们在运行时动态地加载 ES 模块。这个特性为我们实现动态加载代码提供了非常方便的手段。
动态导入的语法非常简单，它可以在任何地方用于导入模块，而不仅仅是模块的顶部。动态导入返回一个 promise 对象，可以用于获取导入模块的默认导出或命名导出。
让我们来看看它的语法：
-----------------------
-------------- -- -
-- ------------
--
------------ -- -
-- ------------
---Dynamic Import 的优势
传统的静态导入方式不允许我们在运行时动态地加载模块。而动态导入允许我们在特定的场景下实现动态加载代码，从而带来以下优势：
减少了应用的初始化时间。在需要的时候才动态加载代码，可以让应用更快地启动。
减少了 bundle 的大小。动态导入允许我们按需加载代码，而不是将所有代码打包到一个 bundle 里面。
Dynamic Import 的场景
动态导入适用于以下场景：
按需加载相关的组件和资源。
延迟加载 Web 应用程序中的某些模块，从而减少初始启动时间。
在某些条件下才加载某些模块。
示例代码
让我们来看一个简单的例子，展示如何使用动态导入在运行时动态加载模块：
-- ------------- ----- ----------- - ----- -- -- - ----- ------ - ----- ---------------------- ----------------- -- -- -------------------- ----- --------- - ----- -- -- - ----- ------ - ----- ---------------------- ------ ------- -- ----- ----------- - ----- -- -- - ----- ------ - ----- ------------ ----------------- --
总结
ES11 中的 Dynamic Import 为我们提供了一种方便的方式来动态地加载代码。它不仅可以减少应用程序的初始化时间，还可以减少 bundle 的大小，更容易实现按需加载组件和资源。
当使用 Dynamic Import 时，我们应该注意到它可能会增加代码的复杂性。我们需要在适当的时候考虑使用它，并在使用前仔细考虑相关的风险和收益。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6642d9a7d3423812e40c68f9