在前端开发过程中，一个常见的问题是如何处理异步加载的模块。当我们需要在代码中引入一个模块，但是又不希望它在页面刚刚加载时就立刻执行时，就需要用到动态装载的方法。在 ES12 中，新增了动态装载模块的语法，可以更加便捷地实现异步加载。
ES12 中的动态装载模块
动态装载模块是 ES12 中新增的语法，和 import 语句一样，可以轻松地在代码中引入新的模块。和 import 语句不同的是，动态装载模块在运行时才会执行，而不是在编译阶段就执行。
动态装载模块的语法如下所示：
import(moduleName).then(module => {
// 对使用该模块的代码进行操作
}).catch(err => {
// 捕获错误
});在这段代码中，我们使用 import() 方法来加载模块，这个方法会返回一个 Promise 对象。一旦模块加载完成，我们就可以在 then() 回调函数中进行操作，catch() 方法可以用来捕获加载过程中的错误。
动态装载模块的学习指南
要使用动态装载模块实现异步加载，我们需要掌握以下几个方面的知识：
1. 加载模块
首先，我们需要学会如何加载模块。在动态装载模块中，我们使用 import() 方法来加载模块，这个方法会返回一个 Promise 对象。使用 then() 方法来获取加载完成的模块，使用 catch() 方法来捕获加载过程中的错误。
import('./module.js')
.then(module => {
// 对使用该模块的代码进行操作
})
.catch(err => {
// 捕获错误
});2. 使用模块
在加载完成模块之后，我们需要使用它。可以像普通的模块一样，使用 module 对象中的属性和方法。
import('./module.js')
.then(module => {
console.log(module.myModuleProperty);
module.myModuleMethod();
});3. 动态加载模块的场景
在什么情况下需要使用动态装载模块呢？可以参考以下几个场景：
- 在用户浏览网页时动态加载模块，优化网页加载速度和性能。
- 当用户进行某些特定的操作时，才动态加载相关模块，避免不必要的资源浪费。
- 在不同的应用程序状态下，动态加载不同的模块。
动态装载模块的示例代码
以下是一个简单的使用动态载入模块的例子：
-- -------------------- ---- -------
----------- -
-- ------
--- ----- - ----------
-- ------- -- --
----- ------ - ----------------------------------
-------------------------------- -- -- -
-- ------ --- ---------- -
---------------------
------------ -- -
-------------------- -- ------
----- - ------------------ -- ------
------------------ - ----------
--
---------- -- -
-------------------
---
- ---- -
---------------------
------------ -- -
--------------------- -- ----
----- - ------------------ -- ------
------------------ - ---------
--
---------- -- -
-------------------
---
-
---
-----在这段代码中，我们在页面初始状态下，只加载了一个按钮。当点击按钮时，我们动态装载了一个名为 module.js 的 JavaScript 模块，并使用它来修改页面状态和按钮文本。当再次点击按钮时，我们重新加载 module.js 模块，并还原页面状态和按钮文本。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d00d30e46428fe9ec92f32