动态 import() 不能在 html 中直接使用，必须在 type="module" 的 javascript 脚本中调用，且需置于 async 函数或 .then() 中；路径须为静态字符串，不可变量拼接，否则构建失败或运行报错。
动态 import() 在 HTML 中根本不能直接使用
HTML 文件本身不支持 import() 语法——它不是 JavaScript 执行环境，只是资源加载和结构描述文档。所谓“HTML 实现动态 import”，实际是指：在 HTML 中引入的 JS 脚本里调用 import()，且该脚本需满足模块上下文（type="module"）。
常见错误是直接在普通 <script></script> 标签里写 import('./foo.js')，结果报错 Unexpected token 'import' 或 Cannot use import statement outside a module。
- 必须用
<script type="module"></script>包裹调用逻辑，或从一个已声明为模块的入口脚本中发起 - 动态
import()本身返回 Promise，只能在 async 函数或 .then() 链中使用，不能出现在顶层同步代码中（除非用 top-level await，且浏览器支持） - 路径必须是相对 URL、绝对 URL 或完整 URL；不能是变量拼接的字符串（如
import('./' + name + '.js')），否则 Webpack/Vite 等构建工具无法静态分析，可能打包失败或运行时报Dynamic require is not supported
怎么让点击按钮才加载并执行一个模块
典型按需场景：用户点击「编辑」按钮后，才加载富文本编辑器模块（比如 tui-editor），避免首屏加载过大。
关键点不在 HTML，而在绑定事件的模块脚本里：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
// main.mjs
document.getElementById('edit-btn').addEventListener('click', async () => {
try {
const { default: Editor } = await import('./editor.js');
new Editor({ el: '#editor-container' });
} catch (err) {
console.error('Editor load failed:', err);
}
});
- 确保
editor.js是有效的 ES 模块（导出用export default或具名 export） - 如果
editor.js依赖其他包（如codemirror），且你没用构建工具，需确认这些包也提供了 ESM 版本（看 package.json 的exports或module字段） - 错误捕获必须显式写，否则加载失败会静默，连控制台都不报错（Promise rejection unhandled）
Vite / Webpack 下路径别名和 public 目录的坑
开发时习惯写 import('@/utils/api.js') 或 import('/logo.svg')，但动态 import() 对路径解析更严格。
- Vite 中
@/别名仅对静态 import 生效，动态 import 里写import('@/mod.js')会 404——必须用真实相对路径，如import('../src/utils/mod.js') - public 目录下的文件（如
public/data/config.json）可通过import('/data/config.json')加载，但注意：它会被当作 JSON 模块（Vite 支持，Webpack 需额外配置type: 'json'），返回的是默认导出对象，不是原始字符串 - 动态 import 加载非 JS 资源（如 wasm、web worker）时，路径必须带扩展名，且构建工具需明确支持该类型；例如
import('./worker.ts')在 Vite 中会自动编译并生成 worker blob，但写成import('./worker')就会失败
SSR 或预渲染时 import() 的行为差异
服务端（Node.js）不支持原生 import()（除非用 vm.Module 或实验性 flag），所以 SSR 框架（如 Nuxt、Next）遇到动态 import 会跳过执行，或 fallback 到空模块。
- Vue/React 组件内使用
defineAsyncComponent或lazy()是安全的，它们内部做了 SSR 适配 - 纯工具函数级别的动态 import（如
await import('./math-utils.js')）在 Node 环境下会抛ReferenceError: document is not defined或直接失败——除非你用if (typeof window !== 'undefined')包一层 - 构建产物中，动态 import 会被打包成独立 chunk（如
2.a1b2c3d4.js），但若模块只被一处引用，有些工具（如 Rollup）可能将其内联，导致“按需”失效
真正要稳，就得接受一个事实：动态 import 的“按需”是构建时决定的 chunk 切分 + 运行时触发加载，不是魔法。路径写错、环境没判断、错误没捕获，三者任一出问题，用户就卡在白屏或功能不可用上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
