ES12 中新增了一个重要的特性：Dynamic Import，即动态导入。这个特性可以让我们在运行时动态地加载模块，而不需要在代码中提前引入。这对于前端开发来说是一个非常有用的功能，因为它可以帮助我们优化前端应用的性能和加载速度。
Dynamic Import 的使用方法
Dynamic Import 的语法非常简单，我们只需要使用 import() 函数来加载模块即可。例如，下面的代码中我们使用 Dynamic Import 来加载一个模块：
--------------------------------- -- - -- -- ------ ---
这个语法看起来和普通的 import 语句很像，但是它是一个函数调用，而不是一个声明语句。这个函数会返回一个 Promise，当模块加载完成后，Promise 的状态会变为 resolved，我们就可以在 then 方法中获取到模块的导出对象了。
Dynamic Import 的优势
Dynamic Import 的最大优势就是它可以让我们在需要的时候才加载模块，而不是在页面加载的时候就把所有的模块都加载进来。这样可以大大优化前端应用的性能和加载速度，特别是对于一些大型的前端应用来说，这个优势尤为明显。
另外，Dynamic Import 还有以下几个优势：
- 支持动态导入 CSS 和 JSON 等非 JavaScript 模块。
- 支持按需加载第三方库，避免打包过大。
- 支持异步加载模块，提高应用的响应速度。
Dynamic Import 的示例代码
下面是一个使用 Dynamic Import 动态加载模块的示例代码：
-- ------------- ----- -------- ------------ - -- ------ ----- ------ - ----- ---------------------- -- ---- ------------------ - -- -------- ---------- ------- -------------
在上面的代码中，我们定义了一个异步函数 loadModule 来加载模块。这个函数使用 import 函数来动态导入模块，并在模块加载完成后调用 sayHello 方法来输出一段文本。最后，我们在需要的时候调用 loadModule 函数来加载模块。
总结
ES12 中新增的 Dynamic Import 特性可以帮助我们优化前端应用的性能和加载速度，特别是对于一些大型的前端应用来说，这个优势尤为明显。我们可以使用 import() 函数来动态导入模块，并在模块加载完成后使用 then 方法来获取模块的导出对象。同时，Dynamic Import 还支持动态导入 CSS 和 JSON 等非 JavaScript 模块，以及按需加载第三方库，提高应用的响应速度。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/662a347bd3423812e47a5bf4