什么是动态导入
在 ES6 模块系统中，我们可以使用 import 关键字来导入一个模块，如下所示：
import React from 'react';
这是一个静态导入，也就是说指定的模块是在编译时就确定的。而动态导入则允许在运行时根据需要导入模块。
动态导入可以用于按需加载模块，提高页面加载速度和性能。它还可以使我们的代码更加干净和模块化，因为我们不需要在顶部导入所有可能需要的模块，而是可以在需要时动态加载。
如何使用动态导入
动态导入可以通过 import() 函数实现，该函数是一个异步函数，返回一个 Promise 对象。使用示例如下：
import('./MyComponent.js').then(MyComponent => {
console.log(MyComponent);
});这里的 import() 函数返回 Promise 对象，我们可以使用 then 方法获取导入的模块。在实际使用时，我们可以通过条件语句、按钮点击事件或路由跳转等方式触发动态导入。
支持动态导入的 Babel 配置
在使用 Babel 编译 ES6 代码时，需要进行一些配置才能支持动态导入。具体来说，我们需要添加插件 @babel/plugin-syntax-dynamic-import 和 @babel/plugin-transform-runtime，以及运行时依赖 @babel/runtime。下面是一个完整的 Babel 配置示例：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
--
---------------------
--
---------- -
--------------------------------------
----------------------------------- - -------------- ---- --
-
-这里的 @babel/preset-env 将 ES6+ 代码转换成兼容的 ES5 代码，@babel/preset-react 是 React 的一个补充插件。@babel/plugin-transform-runtime 用于避免重复打包，减小包体积，@babel/plugin-syntax-dynamic-import 则是使得 Babel 可以理解动态 import() 语句。在使用 @babel/plugin-transform-runtime 时，我们还需要在运行时安装 @babel/runtime。
示例代码
下面是一个简单的示例代码，演示如何使用动态导入：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
----- - -
---------- ----
-
----------- - -- -- -
------------------------------------------- -- -
--------------- ---------- ------------------- ---
---
-
-------- -
----- - ---------- --------- - - -----------
------ -
-----
---------- -----------
------- ------------------------------- ------------------
- --------- - ---------- -- - ---- -
------
--
-
-这里通过按钮点击事件触发动态导入 MyComponent.js，点击后将组件保存到 state 中，然后在 render 函数中渲染。注意，在导入组件时需要使用 MyComponent.default 获取默认值。
总结
通过本文的介绍，我们了解了动态导入的概念和应用场景，并学习了如何在 Babel 中配置以支持动态导入。动态导入可以帮助我们实现按需加载，提高网页性能，增强代码的可维护性。在开发中，我们可以根据实际需求合理运用动态导入。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e8a965f6b2d6eab342f7dc