8.3 动态导入（import()）与代码分割

8.3 动态导入（import()）与代码分割

动态导入（import()）是 ES2020 引入的一种语法，允许在运行时按需加载模块。结合代码分割（Code Splitting），可以显著提升应用的性能，尤其是在大型单页应用（SPA）中。本节将详细介绍动态导入的用法及其在代码分割中的应用。

8.3.1 动态导入的基本用法

动态导入返回一个 Promise，可以在运行时按需加载模块。

1. 基本语法

import("./module.js").then((module) => {
  // 使用模块
});

2. 结合 async/await

async function loadModule() {
  const module = await import("./module.js");
  // 使用模块
}

3. 示例

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

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

8.3.2 代码分割

代码分割是一种将代码拆分为多个小块的技术，可以按需加载，减少初始加载时间。

1. 代码分割的优势

• 减少初始加载时间：只加载当前页面所需的代码。
• 提升性能：减少不必要的资源加载，优化用户体验。
• 按需加载：根据用户操作动态加载代码。

2. 使用动态导入实现代码分割

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

3. 结合路由的代码分割
在单页应用中，可以根据路由动态加载模块：

// router.js
const routes = {
  "/home": () => import("./Home.js"),
  "/about": () => import("./About.js"),
};

function loadRoute(route) {
  routes[route]().then((module) => {
    module.render();
  });
}

loadRoute("/home");

8.3.3 动态导入与 Webpack

Webpack 等打包工具支持动态导入，并会自动进行代码分割。

1. 基本配置
Webpack 默认支持动态导入，无需额外配置。

2. 示例

// webpack.config.js
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist",
  },
  mode: "production",
};

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

3. 生成的文件
Webpack 会将动态导入的模块打包为单独的文件，例如 1.bundle.js。

8.3.4 示例代码

示例 1：动态导入

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

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

示例 2：结合路由的代码分割

// Home.js
export function render() {
  console.log("Rendering Home");
}

// About.js
export function render() {
  console.log("Rendering About");
}

// router.js
const routes = {
  "/home": () => import("./Home.js"),
  "/about": () => import("./About.js"),
};

function loadRoute(route) {
  routes[route]().then((module) => {
    module.render();
  });
}

loadRoute("/home"); // 输出 "Rendering Home"

8.3.5 总结

• 动态导入：允许在运行时按需加载模块，返回一个 Promise。
• 代码分割：将代码拆分为多个小块，按需加载，提升性能。
• 应用场景：单页应用、按需加载、优化初始加载时间。

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

思考题：

1. 动态导入的主要优势是什么？
2. 如何在单页应用中使用代码分割优化性能？
3. Webpack 如何支持动态导入和代码分割？