ES2020 是 ECMAScript（即 JavaScript）的最新规范版本，于2020年6月发布。该版本在语言的核心基础上引入了一些新特性，其中一个关键特性就是 Dynamic Import，也称作动态导入。
什么是 Dynamic Import？
首先，让我们回顾一下 ES6 中的 import 语句。在 ES6 中，我们使用静态导入语句来引入模块，例如：
------ - --- - ---- --------------
这个 import 语句在编译时执行，意味着在代码执行期间，引入的模块都是已知的。但是，在某些情况下，我们可能需要动态地加载模块，这就是 Dynamic Import 所要解决的问题。
Dynamic Import 允许我们在运行时（而不是编译时）动态加载 JavaScript 模块，提供了更加灵活的代码组织和切分方式。其中，最常见的使用场景是懒加载（lazy loading）和条件加载（conditional loading）。
语法
Dynamic Import 的语法很简单。我们只需要在 import 关键字后面，将一个字符串放在一对圆括号中即可：
---------------------
------------ -- -
-- ------------------
--
------------ -- -
-- -----------------
---这种语法有点像 Promise 的形式，返回一个 Promise 对象，可以通过 then() 和 catch() 方法进行响应。
需要注意的是，import() 函数返回的是一个 Promise 对象，所以需要使用异步函数或者 Promise 链来处理。
示例
让我们看一个使用 Dynamic Import 的简单示例。假设我们有一个简单的 HTML 文件，里面有一个按钮，点击该按钮会动态地加载并执行指定的代码文件。
首先，我们创建一个 index.html 文件：
--------- -----
------
------
-------------- ------ ------------
-------
------
------- ------------- -------------
--------
-------------------------------------------------------- ----- -- -- -
----- - -------- --- - - ----- --------------------
------
---
---------
-------
-------在该文件中，我们定义了一个按钮，绑定了一个 click 事件。当按钮被点击时，我们会加载并执行 code.js 文件中的代码。
接着，我们创建一个 code.js 文件：
-------- ----- - ----------------- ---------- - ------ ------- ----
这个文件里只有一个简单的函数，以及使用 export default 导出这个函数。
最后，我们运行 index.html 文件，点击按钮，就能看到控制台输出 "Code Loaded!" 的信息。
指导意义
使用 Dynamic Import，我们可以按需加载 JavaScript 模块，减少初始加载量，提升网站性能和加载速度。此外，由于动态加载的特性，我们可以使用更加灵活的代码组织方式，将代码拆分成更小的模块，方便管理和维护。
不过，需要注意的是，由于该特性还比较新鲜，可能还不被所有浏览器和 JavaScript 引擎所支持。因此，在使用 Dynamic Import 时，需要进行必要的兼容性测试，并在必要时提供降级策略。
结论
Dynamic Import 是 ES2020 中的一项新特性，允许我们在运行时动态加载 JavaScript 模块。它可以提升网站性能和加载速度，同时也带来了更加灵活的代码组织方式。不过，需要注意其兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671ee4692e7021665efa53e1