12.2 动态导入与顶层 await

12.2 动态导入与顶层 await

ES2020 引入了动态导入（Dynamic Import）和顶层 await（Top-Level await），进一步增强了 JavaScript 的模块化和异步编程能力。本节将详细介绍这两个特性的用法及其应用场景。

12.2.1 动态导入

动态导入允许在运行时按需加载模块，返回一个 Promise，适用于代码分割和懒加载。

1. 基本语法

import("./module.js").then((module) => {
  module.someFunction();
});

2. 结合 async/await

async function loadModule() {
  const module = await import("./module.js");
  module.someFunction();
}

loadModule();

3. 应用场景

• 代码分割：将代码拆分为多个模块，按需加载。
• 懒加载：在需要时加载模块，减少初始加载时间。

12.2.2 顶层 await

顶层 await 允许在模块的顶层使用 await，而不需要包裹在 async 函数中。

1. 基本用法

// module.js
const response = await fetch("https://api.example.com/data");
const data = await response.json();
export default data;

// main.js
import data from "./module.js";
console.log(data);

2. 应用场景

• 模块初始化：在模块加载时执行异步操作。
• 配置加载：在模块加载时加载配置或资源。

12.2.3 动态导入与顶层 await 的结合

动态导入和顶层 await 可以结合使用，实现更灵活的模块加载和初始化。

1. 示例

// module.js
export const data = await fetch("https://api.example.com/data").then((res) =>
  res.json()
);

// main.js
const module = await import("./module.js");
console.log(module.data);

12.2.4 示例代码

示例 1：动态导入

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import("./math.js").then((math) => {
  console.log(math.add(1, 2)); // 输出 3
});

示例 2：顶层 await

// config.js
const config = await fetch("https://api.example.com/config").then((res) =>
  res.json()
);
export default config;

// main.js
import config from "./config.js";
console.log(config);

示例 3：结合使用

// data.js
export const data = await fetch("https://api.example.com/data").then((res) =>
  res.json()
);

// main.js
const module = await import("./data.js");
console.log(module.data);

12.2.5 总结

• 动态导入：允许在运行时按需加载模块，适用于代码分割和懒加载。
• 顶层 await：允许在模块的顶层使用 await，简化异步操作。
• 应用场景：代码分割、懒加载、模块初始化、配置加载。

通过掌握动态导入和顶层 await，你可以编写更高效、更灵活的模块化代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 动态导入的主要优势是什么？
2. 顶层 await 的主要用途是什么？
3. 在什么情况下应该使用动态导入和顶层 await？