ECMAScript 2020（ES2020）是 JavaScript 标准的最新版本。其中，新增了一项特性：dynamic import()。这个特性可以让我们在运行时动态地加载 JavaScript 模块，而不是在静态阶段就加载完毕，这对于组件化和优化应用程序的性能等方面有很大的帮助。
什么是 dynamic import()?
在之前的 ECMAScript 版本中，我们只能在静态阶段使用 import 语句引入模块，它是一种静态的声明，而且它的使用方式直接影响着整个代码的运行时性能。而 dynamic import() 则是指我们可以在运行时根据需要动态地加载模块。
使用 dynamic import() 时，我们可以通过 Promise 的方式来异步加载 JavaScript 模块，而不是立即加载。这意味着，在我们需要使用模块时才会真正开始加载它们，可以提高应用程序的性能。
dynamic import() 的语法
动态引入模块的语法如下：
import('path/to/module').then((module) => {
// 模块加载成功
}).catch((error) => {
// 模块加载失败
});需要注意的是，dynamic import() 函数返回的是一个 Promise 对象，我们需要使用 then() 和 catch() 方法来异步处理模块加载结果。在模块加载成功时，我们可以使用导入的模块。
dynamic import() 的用途
dynamic import() 的用途非常广泛，特别是在应用程序组件化和性能优化方面。下面是一些典型的应用场景。
延迟加载组件
我们可以在运行时动态加载组件，而不是在静态阶段一次性加载所有组件。这样可以有效降低初始加载时间，并提高应用程序的性能。例如：
document.getElementById('button').addEventListener('click', async function(event) {
const module = await import('./path/to/component.js');
const component = new module.default();
component.init();
});当用户点击按钮时，我们才加载并初始化组件，减少了初始加载时间。
模块分片
通过动态加载模块，我们可以将应用程序的代码切割成更小的块，便于按需加载。例如：
document.getElementById('button').addEventListener('click', async function(event) {
const module1 = await import('./path/to/module1.js');
const module2 = await import('./path/to/module2.js');
// ...
});这样可以减少初始加载时间，并且在后续使用时才加载相应的模块，提高应用程序的性能。
dynamic import() 的注意事项
使用 dynamic import() 时需要注意以下几点：
需要使用绝对路径
由于 dynamic import() 是在运行时通过相对路径加载模块，因此必须使用绝对路径来引入模块，否则可能会无法找到模块：
import('./path/to/myModule.js'); // 正确的引入方式
import('../myModule.js'); // 错误的引入方式dynamic import() 不支持静态类型检查
由于 dynamic import() 是在运行时才加载模块，因此无法在静态阶段就确定模块的类型。这意味着 dynamic import() 不支持静态类型检查。需要使用时请注意。
dynamic import() 的浏览器兼容性
目前 dynamic import() 的浏览器兼容性不是很好，只有一些现代浏览器和最新的 Node.js 版本才支持。
动手实践
下面是一个使用 dynamic import() 加载组件的示例代码：
-- -------------------- ---- -------
-- ------------
------ ------- ----- --------- -
------ -
---------------------- --------------
-
-
-- --------
----------------------------------------------------------- ----- --------------- -
----- ------ - ----- -------------------------
----- --------- - --- -----------------
-----------------
---在 index.js 中，我们通过动态加载 component.js 模块，实现了延迟加载组件的效果。运行这段代码可以在控制台看到组件被成功初始化的消息。
总结
dynamic import() 是 ECMAScript 2020 中新增的一个特性，可以让我们在运行时动态地加载 JavaScript 模块。使用 dynamic import() 可以应用于组件化和性能优化等方面。需要注意的是，dynamic import() 只支持绝对路径和运行时加载，对于静态类型检查和浏览器兼容性等方面需要特别注意。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a156ed48841e9894d9cc58