每当应用程序代码增长到包含数千行时，将代码分割成模块变得尤为重要。模块允许开发人员分解复杂的代码，并在不同的文件中通过导入来使用。
在 JavaScript 模块章节中，您已经学会了如何从模块中导入和导出对象，但这是一种静态导入，因为我们是在代码顶部加载它们的。有时，我们需要在需要的时候才导入模块，而不是静态导入，以提高 Web 应用程序的性能。这也被称为动态导入。
使用 import() 表达式进行动态导入
当您需要动态导入一个模块时，可以使用 import() 表达式，它返回一个 promise。我们可以使用 import() 表达式在代码中的任何地方动态导入模块。
语法
用户可以按照以下语法使用 import() 表达式来动态导入模块：
import(moduleName).then(module => {
});
在上述语法中，我们使用 then() 方法与 import() 表达式一起解决这个 promise。
参数
moduleName − 它接受作为参数的模块名或路径，这是我们想要动态加载的。
返回值
它返回一个 promise。
动态导入示例
示例 1
文件名: test.js
在下面的代码中，我们导出了包含整数值的变量 val1。
export const val1 = 11;
文件名: test.html
在下面的代码中，我们使用了 if-else 语句。我们在 if() 块中导入模块并使用其对象。
通过这种方式，我们可以使用 import() 表达式动态导入模块。
<html>
<body>
<div>示例 1 - JavaScript 中的动态导入</div>
<div id = "output"> </div>
<script type="module">
let output = document.getElementById('output');
let val = 2;
if (val < 5) {
import('./test.js').then(module => {
output.innerHTML = "导入的值是 " + module.val1;
});
} else {
output.innerHTML = "值大于 5";
}
</script>
</body>
</html>
输出
示例 1 - JavaScript 中的动态导入
导入的值是 11
示例 2
文件名: test.js
在下面的代码中，我们定义了一个返回两个数字之和的 add() 函数。
export function add(a, b) {
return a + b;
}
文件名: test.html
在下面的代码中，我们给按钮添加了一个 click 事件监听器。当用户点击按钮时，它会加载 test.js 模块。在这里，我们使用 async/await 来处理 import() 表达式返回的 promise。
之后，我们使用模块中的 add() 函数来计算两个数字的总和，并且用户可以在输出中观察到求和的结果。
<html>
<body>
<div>示例 2 - JavaScript 中的动态导入</h2>
<div id = "output"> </div>
<button id = "button"> 点击我 </button>
<script type="module">
let output = document.getElementById('output');
let btn = document.getElementById('button');
btn.addEventListener('click', async () => {
let module = await import('./test.js');
let result = module.add(2, 3);
output.innerHTML = "2 和 3 的和是 " + result;
});
</script>
</body>
</html>
输出
示例 2 - JavaScript 中的动态导入
2 和 3 的和是 5
通过这种方式，开发人员可以在函数、if-else 块等需要的地方动态导入模块，而不是在代码顶部导入它们。