HTML Academy · 课时

模块中的动态 import()

Q: 「模块中的动态 import()」这节课中我会学到什么？

使用动态 import() 按需加载模块 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用动态 import() 按需加载模块

模块中的动态 import() 是 CoddyKit 上的免费 HTML Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

import() 表达式

与静态 import 声明不同，import("./module.js") 是一个表达式，会返回一个 Promise，该 Promise 会解析为模块命名空间。它可以在任何位置使用，包括函数、条件语句，甚至非模块脚本内部。

代码拆分

动态导入是代码拆分的主要机制。路由处理程序可以将路由代码的加载推迟到用户进行导航时：const mod = await import("./routes/admin.js")。在真正需要之前，路由代码的字节不会被下载。

document.getElementById("settings-btn").addEventListener("click", async () => {
  const { renderSettings } = await import("./settings.js");
  renderSettings();
});

返回的模块命名空间

解析后的值就是模块命名空间——一个将模块导出内容作为属性的对象。您可以在行内解构命名导出，也可以通过 module.default 访问默认导出。

捕获错误

由于 import() 返回一个 Promise，获取失败或语法错误会传播到 .catch()。请在异步函数中使用 try/catch，或使用 .catch() 包装动态导入，以妥善处理网络故障。

try {
  const mod = await import("./optional.js");
  mod.run();
} catch (e) {
  console.warn("Optional module failed", e);
}

条件加载

只在旧版浏览器中加载填充程序：if (!window.IntersectionObserver) await import("intersection-observer-polyfill")。现代浏览器完全不会下载这些字节；旧版浏览器也只会在需要时承担这项开销。

说明符解析

说明符遵循与静态导入相同的规则：相对网址、绝对网址，或通过导入映射表映射的裸名称。也可以使用动态字符串：import(`./locales/${lang}.js`)，不过打包工具可能难以对此进行代码拆分。

缓存

每个唯一的说明符都会解析到同一个模块实例。第二次调用 import("./mod.js") 时，会返回已经加载的模块，无需再次进行网络往返，因此可以放心在事件处理程序中使用动态导入，不必担心重复下载。

顶层动态导入

在模块内部，您可以结合顶层 await 和动态导入，将执行延迟到异步加载的辅助模块可用之后。这对于插件列表需要在运行时确定的插件系统很有用。

// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();

与 React.lazy 和 Preact 配合使用

React.lazy、Preact 的 `lazy`（来自 preact/compat）以及 Vue 的 defineAsyncComponent 都会包装动态导入，以实现组件级代码拆分。浏览器提供的原语是 import()；框架则在其上添加类似挂起机制的加载边界。

Webpack 和 Vite 的代码拆分

打包工具会在源代码中发现 import("...")，并为被导入的模块生成单独的代码块。运行时桩会在首次调用时获取该代码块。作者编写的是符合 ES 规范的 import()；打包工具负责生成网络调度过程。

常见错误

在热路径中调用 import("X")（例如在渲染循环内）会在每次调用时重新检查缓存。虽然它不会重新下载模块，但查找本身会产生开销。请在第一次导入后，将解析得到的命名空间存储到一个变量中。

知识检查

import("./mod.js") 会返回什么？

摘要

动态 import() 是静态 import 声明的按需版本。它会返回一个解析为模块命名空间的 Promise，从而支持代码拆分、条件加载填充程序和插件系统。模块在首次导入后会被缓存，因此后续调用无需额外开销。打包工具会为每次动态导入调用生成单独的代码块。

常见问题解答

「模块中的动态 import()」课时是免费的吗？

是的 — 「模块中的动态 import()」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「模块中的动态 import()」这节课中我会学到什么？

使用动态 import() 按需加载模块你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「模块中的动态 import()」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy