在 ES11（也被称为 ES2020）中，JavaScript 引入了 dynamic import（动态导入）这个新功能。它使得我们可以在运行时动态地载入一个模块，而不需要在代码中明确地写出它的依赖关系。这个新功能可以改善应用的性能和代码的可维护性，并且也适用于许多实际的开发场景。
动态导入的优势
在过去，我们通常使用 import 和 require 两个关键字来导入 JavaScript 模块，代码可能长这样：
const foo = require('./foo');
const bar = require('./bar');
// or
import foo from './foo';
import bar from './bar';这种静态导入方式有许多局限，其中之一就是我们必须在编译时确定模块的依赖关系，这使得在运行时动态地导入模块变得非常困难，甚至不可能。这限制了我们的应用的性能和代码的可维护性。
ES11 中的动态导入打破了这个限制。我们可以在需要的时候动态地加载模块，例如：
// 动态地载入模块
const module = await import('./module.js');这段代码与之前的静态导入不同的是，它并不直接在代码中指定依赖关系。而是在运行时动态地选择要载入的模块。这带来了一些实际的优势：
动态地加载模块
动态导入允许我们在程序运行时动态地加载模块，而不是在编译时就确定好了。这意味着我们可以对需要用到的代码进行更细粒度的切割和拆分，这有助于我们实现更快速的应用启动和更流畅的用户体验。
优化加载时间
动态导入可以让我们更好地控制程序的加载时间。我们可以只在需要用到一个模块时才将其载入，而不是一开始就加载整个应用程序。这可以显著提高我们应用程序的响应速度和性能。
提高代码的可维护性
动态导入可以让我们在不同模块之间建立更松散的耦合，这可以提高代码的可维护性。我们可以将一些相对独立的功能封装成不同的模块，然后根据需要动态地加载它们。
如何使用动态导入
动态导入的语法很简单，我们只需要使用 import() 方法来载入我们想要的模块：
const module = await import('./module.js');注意 import() 方法是一个异步方法，因此我们需要使用 async/await 或 .then() 方法来处理加载成功后的结果。比如：
-- -------------------- ---- -------
-- -- ----------- ---
----- -------- ------------ -
----- ------ - ----- ----------------------
-- --------------
-
-- -- ------- ---
---------------------
-------------- -- -
-- --------------
--
------------ -- -
-----------------
---实际应用
动态导入非常适合那些需要按需加载代码的场景。下面是一个例子：
-- -------------------- ---- -------
-- -------
----- ------- - ----------------------- ---------------------- -----------------------
-- ---------
----- -------- ----------------------- -
--- ------ ------ -- -------- -
----- ------------ - ----- ---------------
---------------------------
-
-
----------------------------------- -- -
-------------------
---在这个例子中，我们需要按需加载多个过程相对独立的模块。使用动态导入我们可以实现这个需求，将代码按需加载，实现更优秀的用户体验。
总结
ES11 动态导入为前端开发提供了更好的模块化方案。它使得我们可以在运行时动态地加载模块，提高应用的性能和代码的可维护性。使用动态导入，我们可以更好地控制程序的加载，提高应用的速度和性能。动态导入非常适合于需要按需加载代码的场景，例如异步页面加载、按需载入组件等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648e7bbd48841e9894cd811a