随着现代 JavaScript 应用程序的发展，模块化已成为开发人员必须掌握的基本技能之一。ECMAScript 2015（ES6）引入了 import/export 机制使得模块化编程更加方便。而在 ECMAScript 2019 中，新增加了一个重要特性: 动态导入。
什么是动态导入？
通常情况下，我们使用静态导入来引入其他模块：
------ - ------- - ---- ---------------
这种静态导入需要在编译时确定。相比之下，动态导入可以在运行时决定要导入哪个模块，如下所示：
------------------------------------ -- - ----- ------- - --------------- -- -- --------- ---- ------- ---
注意到上述代码使用了 import() 函数，它返回一个 Promise。当 Promise 解析后，就可以从模块中取出 exports 对象里面的内容，就跟使用静态导入一样。
使用动态导入有很多好处：首先，它构建起了一种异步加载模块的标准方法，在 Web 上被广泛支持；其次，使用动态导入可以节省应用程序部署时的带宽和内存空间，并且让公共库和某些不太常用的功能能够以按需方式加载。
不过，需要注意的是，使用动态导入也有缺点。因为它要在运行时解析模块，所以可能会出现某些执行期间错误。同时，在浏览器中使用动态导入也存在一定的兼容性问题。
在 JavaScript 应用程序中使用动态导入
要使用动态导入，我们首先需要确保项目中的编译器支持 ECMAScript 2019 标准。具体来说，webpack 配置中应该这样写：
-------------- - -
-- ---
------------- -
------------- ---------
--
--此外，你还需要从代码中使用 import() 函数来加载任何动态代码。
下面来看一个示例，假设我们正在开发一个翻译组件，它需要在运行时动态加载语言包。让我们来看一下如何实现：
-- -------
----- ------------ - -
--- -
------ ------- --------
--
--- -
------ ---------
--
--
------ -------- ---------------------- -
------ ---------------------
-
-- -------
----- -------- ----------------- -
----- - -------------- - - ----- --------------------
----- ----------- - -----------------------
-------------------------------
-
---------------- -- ------- ------- -------
---------------- -- ------- --------在上述示例中，我们通过在 main.js 中使用 import() 函数来异步加载语言包。当它被解析并加载时，我们再用获取到的 getTranslation 函数来获取翻译内容。
如此以来，在程序运行时就能按需加载模块（即使它们只在需要时才被使用），这既确保了最佳性能，也增强了程序的可拓展性。
总结
动态导入是 ECMAScript 2019 提供的一种新特性，可以让开发人员在运行时异步加载模块，并提高应用程序的性能和可拓展性。本文介绍了动态导入的基础知识、使用方法和相关注意事项。如果你还没尝试过动态导入，那就赶紧试一试吧！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65298cf57d4982a6ebc0bb57