自从 ES6（即 ECMAScript 2015）中引入了模块化的概念以来，我们已经习惯于在声明文件时使用静态导入（Static Import）语句。但是，对于一些依赖于异步加载的应用程序来说，我们希望能够动态地加载模块。这时，ECMAScript 2018 中引入了动态导入（Dynamic Imports）特性。
本文将详细介绍 ECMAScript 2018 中动态导入特性的使用，以及它具有的深度和指导意义。
动态导入的语法
来看看动态导入的语法。它是一个相对于静态导入语句更加灵活的语句，它支持使用 import() 函数动态加载模块：
import('path/to/module')
.then(module => {
// Do something with `module`.
})
.catch(error => {
// Handle the error.
});这个方法返回一个 Promise 对象，当模块被成功加载后，Promise 回调函数会传入被加载的模块作为参数，反之则传入加载错误的错误信息。
需要注意的是，由于动态导入属于 ECMAScript 2018 的规范，因此，需要确保你的代码在支持该规范的 JavaScript 引擎下运行。
动态导入的深度与指导意义
相对于静态导入语句而言，动态导入语句具有更大的灵活性。在任何地方都可以使用该语句，例如，你可以将动态导入语句作为 IIFE 的一部分，然后在另外一个模块中调用该函数来加载模块。
更有意思的是，你甚至可以使用 Promise.all() 方法来并发加载多个模块：
-- -------------------- ---- ------- ------------- ---------------------------- ---------------------------- --------------------------- ------------------ -------- --------- -- - -- -- --------- ---- --- -------- -------------- -- - -- ------ --- ------ ---
上述代码中，Promise.all() 方法等待所有动态导入语句都成功执行后，才会将加载后的模块作为数组传递给 then() 方法。
另外，动态导入语句在大型应用程序中显得尤其重要，因为它可以将应用程序拆分为动态加载的子模块，从而提高性能。动态导入语句的使用，可以使得我们的应用程序不再同时加载所有的模块，而是等到需要使用模块时再去加载。
示例代码
-- -------------------- ---- -------
-- -----------------
----- ---- - -------------------
------------
------------ -- -
-- -- --------- ---- ---------
--
------------ -- -
-- ------ --- ------
---
-- ------ ------------- --
-------------
----------------------------
----------------------------
---------------------------
------------------ -------- --------- -- -
-- -- --------- ---- --- --------
-------------- -- -
-- ------ --- ------
---
-- -- ------------ - -------- ---------
------ ------ - ----- -------- - ---- --------
----- ------------- - ------- -- -----------------------------------
----------------
--------- ---------------------------------
-------------- --
------------
-------------------------------
--总结
在现代 Web 应用程序中，动态导入越来越受欢迎，因为它具有独特的灵活性和性能优势。ECMAScript 2018 中引入的动态导入特性让我们可以更加灵活地加载模块，从而使得我们可以将应用程序拆分为动态加载的子模块，从而提高性能并改善用户体验。
在编写应用程序时，我们应该在关键的地方使用动态导入语句，并且需要确保我们的代码在支持 ECMAScript 2018 规范的 JavaScript 引擎下运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d0bf83b5eee0b5257bb6f3